CSS || flex笔记

Flex布局

Flex是flexible box的简称，纯粹用来布局的属性

1 flex和inline-flex

任何容器都可以知道为Flex布局，块级元素使用display: flex; ；行内元素使用inline-flex

• 容器使用Flex布局后，子元素的float、clear和verticle-align属性将失效

2 基本概念

采用Flex布局的元素， 称为flex container容器。容器内的子元素自动成为flex container的成员，称为flex-item

flex-item的排列方向是main axis：即flex-direction指定主轴是水平或是垂直

容器默认存在水平主轴main axis和垂直的交叉轴cross axis

• main axis：flex-item排列的方向是主轴

• cross axis：与主轴垂直的是交叉轴

• 主轴的开始和结束位置：main start和main end

• 交叉轴的开始和结束位置：cross start和cross end

• flex-item在主轴与交叉轴占据的空间：main size和cross size

3 flex container的属性

需要在flex container上设置的属性有6个：

1. flex-direction：row | row-reverse | column | column-reverse。默认值为row

   • row（默认值）：主轴是水平方向，flex-item水平排列，main start在左端

   • row-reverse：主轴是水平方向，flex-item水平排列，main start在右端

   • column：主轴是垂直方向，flex-item垂直排列，main start在上边沿

   • column-reverse：主轴是垂直方向，flex-item垂直排列，main start在下边沿
     

2. flex-wrap：nowrap | wrap | wrap-reverse。默认情况下，flex-item都排在一条轴线上；flex-wrap属性定义如果在一条轴线上排不下，换行的规则。
   

   • nowrap（默认值）：不换行
     

   • wrap：换行，第一行排在上方
     

   • wrap-reverse：换行，第一行排在下方
     

3. flex-flow：是flex-direction和flex-wrap的简写，默认值为row nowrap

   • flex-flow: <flex-direction> && <flex-wrap>

4. justify-content：定义flex-item在主轴main-axis上的对齐方式

   • justify-content: flex-start | flex-end | center | space-between | space-around。五个取值与主轴方向有关

   • flex-start（默认值）：左对齐；flex-end右对齐；center居中；

   • space-between：两端对其，flex-item间的间隔距离相等

   • space-around：每个flex-item两侧的间隔相等，相当于设置左右margin值相等。
     

5. align-items：定义flex-item在交叉轴的对其方式

   • align-items: flex-start | flex-end | center | baseline | strecth。五个取值与交叉轴方向有关

   • flex-start交叉轴起点对其；

   • baseline：flex-item的第一行文字的基线对齐

   • stretch（默认值）：如果flex-item没有设置高度或者值为auto，将占满整个容器高度
     

6. align-content：如果容器内出现多跟轴线（即出现wrap），定义主轴在交叉轴上的对齐方式，只有一根轴线时不起作用

   • align-content: flex-start | flex-end | center | space-between | space-around | stretch

   • stretch（默认值）：轴线沾满整个交叉轴

   • space-between：与交叉轴两端对齐，轴线间的间隔平均分布

   • space-around：每根轴线两侧的间隔相等

   • flex-start：与交叉轴起点对其

4 flex-item的属性

在flex-item上设置的属性同样是6个：

1. order: <integer>;： 定义flex-item在主轴上的排列顺序。数值越小，排列越靠前，默认值为0。
   

2. flex-grow: <number>：定义flex-item在主轴上的放大比例。默认值为0：即使存在剩余空间（宽度），也不放大。

   • 如果所有flex-item的flex-grow属性值都是1，表示它们均分剩余空间（如果有）

   • 如果一个flex-item属性值为2，其余为1：前者占据的空间是后者的2倍
     

3. flex-shrink: <number>：定义flex-item在主轴上的缩小比例。默认值为1，即如果空间不足，该flex-item会缩小。

   • 如果所有flex-item的flex-shrink属性值都为1，在空间不足时，都将等比例缩小

   • flex-shrink为0的flex-item在空间不足时，不会缩小。
     

4. flex-basis: <length> | auto：定义在分配剩余空间前，flex-item占据主轴的空间main size。默认值为auto，表示flex-item本来的大小。

   • 浏览器根据这个属性计算是否存在多余空间

   • 如果width和height值固定为绝对长度单位（如350px），该flex-item占据固定空间

5. flex属性：是flex-grow、flex-shrink和flex-basis三个属性的简写，默认值为0 1 auto

   • 两个快捷值：none表示(0 0 auto)；auto表示(1 1 auto)

   • 建议优先使用属性值，而非先单独写三个分离的属性（浏览器会自动推算相关值）

6. align-self：允许单个flex-item与其他flex-item在交叉轴有不同的对齐方式，可以覆盖掉align-items的值

   • align-items: auto| flex-start | flex-end | center | baseline | strecth

   • 默认值为auto：表示继承父元素的align-items属性

   • 没有父元素情况下等同于stretch
     

阮一峰教程Flex布局教程