display:flex 弹性布局学习笔记（整理）

作用在flex容器的6大属性

1、flex-direction:row / row-reverse / column / column-reverse：设置主轴方向（子元素的排列方向）

     row：子元素从水平方向的左端开始排列（默认）

     row-reverse：子元素从水平方向的右端开始排列

     column：子元素从垂直方向的顶部开始排列

     column-reverse：子元素从垂直方向的底部开始排列

 

2、flex-wrap:nowrap / wrap / wrap-reverse ：设置子元素的换行规则

     nowrap：不换行（默认）

     wrap:换行，第一行在上方

     wrap-reverse:换行，第一行在下方

 

3、flex-flow:flex-direction flex-wrap：flex-direction 和 flex-wrap 的简写

     flex-flow:column wrap;

 

4、justify-content:flex-start / flex-end / center  / space-between /space-around：子元素在主轴方向上的对齐方式

     flex-start:按flex-direction 设置的排列方式的开始位置对齐

     flex-end:按flex-direction 设置的排列方式的结束位置对齐

     center:按排列方式的中间点对齐

     space-between:两端对齐 项目中间的间隔都相等

     space-around:每个项目两侧间距都相等 所以项目之间的间隔比项目与边框的间隔大一倍

6、align-items:flex-start / flex-end / center / baseline / stretch 设置子元素在垂直交叉轴上的对齐方式。

      flex-start:起点对齐

      flex-end:终点对齐

      center:中点对齐

      baseline:子元素的第一行文字的基线对齐

      stretch:如果子元素未设定高度或者auto，将占满整个容器（默认值）

 

7、align-content:flex-start / flex-end / center / baseline / stretch 设置多根轴线情况下，子元素在垂直交叉轴上的对齐方式。

     如果轴线只有一条则失效

     flex-start:起点对齐

     flex-end:终点对齐

     center:中点对齐

     space-between:两端对齐，轴线之间的间隔平均分布

     space-around:子元素的两边的间隔都相等，且间隔不会重叠

     stretch:占满整个交叉轴  （默认值）

 

作用在子元素上的6大属性

1、order:设置子元素的排列顺序，数值越小，排列越靠前，默认为0

2、flex-grow:定义flex容器有多余空间时 子元素的放大比例，默认为0。

     如果属性值小于0，属性失效。 

    如果属性都大于0，比如子元素1的属性值为1，子元素2的属性值为2，则剩余空间，项目1和项目2按1：2的比例分配

注意：此处分配的空间是剩余空间，而不是容器的全部空间

所以 如果某一flex-direction为row的 flex容器内只有2个子元素，配置子元素1的flex-grow为1，配置子元素2的flex-grow为2，那么这两个元素的 宽度未必就一定1：2。

如果像实现1:2的比例，可以设置两个元素的width都为0，或者flex-basis为0,。

3、flex-shrink：定义项目的缩小比例 默认为1 即如果空间不足 该项目将缩小

4、flex-basis：定义项目占据的主轴空间 如果主轴是水平则设置这个属性，相当于设置项目 的宽度，原来的width失效

5、flex：(flex-grow,flex-shrink,flex-basis)的简写 默认0 1 auto；

6、align-self：定义项目自身在交叉轴上的排列方式，可以覆盖父容器的align-items属性值