flex布局属性有哪些?(flex布局容器常用属性介绍)

 分类:css3知识时间:2022-04-25点击: 2022前端视频教程(自学必看)

flex布局属性有哪些?在使用的过程中任何一个容器都可以指定为Flex布局.{display:flex},行内元素也可以使用Flex布局.box{display:inline-flex;}。当我们将容器设置为Flex布局以后,容器当中的子元素的float、clear等属性会失效。采用Flex布局的元素,称为Flex容器,他的所有子元素自动成为容器成员,称为Flex项目。

flex布局容器常用属性介绍,容器flex布局属性有下面6个属性

flex-direction、flex-wrap、flex-flow、align-items、align-content、justify-content

一.flex-direction属性:

决定主轴的的方向,即容器中项目排列的方向,一般默认的方向是横排列。

flex-direction有四个属性,它的属性值如下:

1、row(默认值):主轴水平方向,起点在左端,

2、row-reverse:起点在右端,

3、column:主轴为垂直方向,起点在上沿,

4、column-reverse:起点在下沿。

flex布局属性有哪些

flex布局属性有哪些

flex布局属性有哪些

flex布局属性有哪些

二.flex-wrap属性:

设置子元素的换行方式,它的属性值如下:

1、nowrap(默认值):不换行 一直往后排(当父布局空间不足时,也不会换行此时可能就会有内容被遮挡看不见了)

2、wrap:换行,子元素往后排,当空间不足时会另起一行从新排列

3、wrap-reverse:换行,跟wrap相似 只是行会从下往上开始

三.flex-flow属性:

它是flex-direction属性和flex-wrap的简写。默认值(row nowrap)为横向排列不换行。

四.justify-content属性:

表示子元素在主轴方向上的对齐方式,它的属性值如下:

1、flex-start(默认值):左对齐

2、flex-end:右对齐

3、center:居中

4、space-between: 两端对齐

5、sp-ace-around:两端对齐但是项目边上的元素和容器之间有空隙

五.align-items属性:

表示子元素在交叉轴上的排列方式,它的属性值如下:

1、flex-start:交叉轴的起点对齐

2、flex-end:终点对齐

3、center:中点对齐

4、baseline:项目的第一行文字基线对齐

5、stretch(默认值):当项目未设置高度的时候,占满这个容器的高度

六.align-content属性:

它定义了多根轴线的对齐方式。当项目只有一根轴线的时候,该属性是不起作用的,它的属性值如下:

1、flex-start:交叉轴的起点对齐,

2、flex-end:终点对齐,

3、center:中点对齐,

4、space-between:与交叉轴的两端对齐,轴线之间的间隔平均分布,

5、space-around:每根轴线两侧的间隔都相等,因此,轴线之间的间隔比轴线与边框的间隔大一倍,

6、strentch(默认值):轴线占满整个交叉轴。

除注明外的文章,均为来源:老汤博客,转载请保留本文地址!
原文地址: