flex 弹性布局

display: flex;

弹性盒子只定义了弹性子元素如何在弹性容器内布局

 

弹性容器的属性：

justify-content: flex-start | flex-end | center 　　在主轴( 假设为默认 row )上面对齐 　　　左对齐  |  右对齐  |  居中

　　space-between：平均分布在该行，左右没有空隙。只有一个弹性项目则从左排。

　　space-around：平均分布在该行，左右各有一半的空隙。只有一个弹性项目则居中。

align-items: flex-start | flex-end | center | baseline | stretch　　　　项目在交叉轴上对齐方式( 假设交叉轴从上到下 )

     上到下  |  下到上  |  居中  |  项目的第一行文字的基线对齐  |  (默认值)如果项目未设置高度或设为auto，将占满整个容器的高度

 

 

flex-direction: row | row-reverse | column | column-reverse　　　　决定主轴的方向（即项目的排列方向）　　水平，左到右(默认) |  水平，右到左  |  竖直，上到下  |  竖直，下到上

flex-wrap：nowrap | wrap  |  wrap-reverse　　　　　　　　　　　  如果一条轴线排不下，如何换行　　　　不换行(默认) |  换行，第一行在上方 |  换行，第一行在下方

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

align-content: flex-start | flex-end | center | space-between | space-around | stretch　　　　用于修改 flex-wrap 属性的行为,用于设置多个行的对齐方式

 

---

 

 

弹性元素的属性：

• order　　　　　　 //用整数值来定义项目的排列顺序。数值越小，排列越靠前，默认为0，可以为负值。
• align-self     //用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
• * flex-grow　　      //定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
• * flex-shrink       //定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

• * flex-basis       //定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
• * flex           //flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选