CSS布局:Flex布局

flex布局又称为弹性布局。弹性布局相关属性分为四大类目,分别为流向控制、对齐方式、顺序控制、弹性设置。

开始

给元素设置display:flex,此时弹性布局就会被创建,被设置为flex的元素称为flex容器,其子元素称之为flex子项。
flex元素的子项拥有以下特性

  • 都是块级元素
  • flex子项浮动失效
  • flex子项的margin不会合并
  • flex子项是格式化的尺寸:子项经过精确计算、应用某个计算值之后的尺寸
  • flex子项如果被设置为绝对定位,则会脱离弹性布局

流向控制

flex-direction

flex-direction:row | column | row-reverse | column-reverse;

flex-direction属性。
用来控制flex子项整体布局方向,决定是从左往右排列还是从右往左排列,是从上往下排列还是从下往上排列。

display:flex;
flex-direction:row;

当设置为row时,flex子项水平排列,是默认值。与之对应的还有row-reverse,同样是水平排列,不过顺序相反。
当设置为column时,flex子项垂直排列。与之对应的还有column-reverse,同样是垂直排列,不过顺序相反。

flex-wrap属性用来控制flex子项是单行显示还是换行显示,以及在换行情况下,每一行内容是否在垂直方向的反方向显示。

flex-wrap

flex-wrap: nowrap | wrap | wrap-reverse;

当设置为wrap时,flex容器宽度不足的时候,flex子项会换行显示。

wrap-reverse表示宽度不足的时候,flex子项会换行显示,但是flex子项是从下往上开始排列的,也就是原本换行到下面一行的flex子项现在换行到上面一行。

flex-flow属性是flex-direction和flex-wrap的缩写属性。
flex-direction属性值写在前面,flex-wrap属性值写在后面。

flex-flow: || 

对齐设置

水平对齐

水平方向的对齐使用justify-content

justify-content:整体布局的水平对齐设置。

justify-content: normal | flex-start | flex-end | center | space-between | space-around | space-evenly;

normal是初始值,表示根据环境不同,可以采用不同的对齐表现。

flex-start可以看成默认值,它是一个逻辑CSS属性值,与文档流方向相关,默认表现为整体布局左对齐。

flex-end是逻辑CSS属性值,与文档流方向相关,默认表现为整体布局右对齐。

center表现为整体布局居中对齐。

space-between表示多余的空白间距只在元素中间区域分配,视觉上表现为两端对齐效果。

space-around表示每个flex子项两侧都环绕互不干扰的等宽的空白间距,最终在视觉表现上边缘两侧的空白只有中间空白宽度的一半。

space-evenly表示每个flex子项两侧空白间距完全相等。

垂直对齐

垂直方向的对齐使用align-items、align-self、align-content。

align-items是设置在flex容器元素上的,控制所有flex子项的垂直对齐方式。
align-self属性是设置在具体的某一个flex子项上的。
align-content属性将所有flex子项作为一个整体进行垂直对齐设置。

align-items: stretch | flex-start | flex-end | center | baseline;
align-self: auto | stretch | flex-start | flex-end | center | baseline;
align-content: stretch | flex-start | flex-end | center | space-between | space-around | space-evenly;

auto是align-self属性的默认值,表示flex子项的垂直对齐方式是由flex容器的align-items属性值决定的。

stretch可以看成弹性布局中align-items属性的默认值,表示flex子项在垂直方向上拉伸。

flex-start是逻辑CSS属性值,与文档流方向相关,默认表现为flex子项顶部对齐。

flex-end是逻辑CSS属性值,与文档流方向相关,默认表现为flex子项底部对齐。

center表示flex子项都是垂直居中对齐。

baseline表示flex子项参与基线对齐。

space-between表现为上下两行两端对齐,剩下的每一行元素等分剩余空间。

space-around表现为每一行元素上下都享有独立不重叠的空白空间。

space-evenly表现为每一行元素上下的空白空间的大小都是一致的。

顺序控制

order

我们可以通过设置order属性来改变某一个flex子项的排序位置。

order: ; 

order属性的值是整数值,默认值是 0,所有flex子项的默认order属性值是0,因此,如果我们想要某一个flex子项在最前面显示,则可以设置比0小的整数。

弹性设置

flex

flex属性是弹性布局的精髓,因为弹性布局的“弹性”就是flex属性的作用。
flex属性是flex-grow、flex-shrink和flex-basis这3个CSS属性的缩写。

flex: auto;
flex: none;
flex: <'flex-grow'> <'flex-shrink'>? || <'flex-basis'>

其中双管道符“||”表示或者,可以无序,也可以同时存在;问号“?”表示0个或1个。

flex-basis

flex-basis属性用来分配基础数量的大小

flex-basis:  | auto;

flex-basis属性则是指定的分配基础尺寸,默认值是auto。

在弹性布局中,一个flex子项的最终尺寸是基础尺寸(或内容尺寸)、弹性增长或收缩、最大最小尺寸共同作用的结果。

flex-basis属性的尺寸是作用在content-box上的,这一点和width属性是一样的。

如果flex-basis属性和width属性同时设置了具体的数值,width属性值会被忽略,优先使用flex-basis的属性值作为基础尺寸。

如果flex-basis的属性值是初始值auto,则会使用width属性设置的长度值作为基础尺寸。

如果flex-basis和width的属性值都是auto,则会使用flex子项的最大内容宽度作为基础尺寸,此时称为“内容尺寸”

flex-grow

flex-grow属性指定了容器剩余空间多余时候的分配规则,默认值是0,表示多余空间不分配

flex-grow: ; 

flex-grow属性的值是数值,可以是小数,默认值是 0。
分配规则:

  1. 所有剩余空间总量是1
  2. 如果只有1个flex子项设置了flex-grow属性值,则有两种分配情况
    • 如果flex-grow属性值小于1,则flex子项扩展的空间就是总剩余空间和这个比例的计算值
    • 如果flex-grow属性值大于1,则flex子项独享所有剩余空间
  3. 如果有多个子项flex设置了flex-grow属性值,则有两种分配情况
    • 如果flex-grow属性值的总和小于1,则每个flex子项扩展的空间就是总剩余空间和当前flex子项设置的flex-grow比例的计算值
    • 如果flex-grow属性值的总和大于1,则所有剩余空间被利用,分配比例就是各个flex子项的flex-grow属性值的比例

flex-shrink

flex-shrink属性指定了容器剩余空间不足时候的分配规则,默认值是1,表示空间不足要分配。

flex-shrink: ;

flex-shrink的值是 数值,默认值是 1 。

分配规则:

  1. 如果只有1个flex子项设置了flex-shrink属性值,则有两种分配情况
    • 如果flex-shrink属性值小于1,则收缩不完全,会有一部分内容溢出flex容器
    • 如果flex-shrink属性值大于等于1,则收缩完全,元素正好填满flex容器
  2. 如果多个flex子项设置了flex-shrink属性,则有两种分配情况
    • 如果flex-shrink属性值的总和小于1,则收缩不完全,每个元素收缩尺寸和“完全收缩的尺寸”的比例就是该元素的flex-shrink属性的值
    • 如果flex-shrink属性值的总和大于1,则收缩完全,每个元素收缩尺寸的比例和flex-shrink属性值的比例一样

你可能感兴趣的:(HTML和CSS,css,html,前端,css3,flex)