flex布局总结

http://www.runoob.com/w3cnote/flex-grammar.html

1、flex是弹性布局，用来为盒模型提供最大的灵活性，任何一个容器都可以指定为flex布局，设置为flex布局以后，float，clear，vertical-align属性将失效。

2、采用flex布局的元素，成为flex容器。它的所有子元素自动成为容器成员，容器默认存在两根轴，分别是水平的主轴和垂直的交叉抽。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。项目默认沿主轴排列。

3、flex-direction决定主轴的方向  flex-direction:row（默认值，主轴为水平方向，起点在左端）|row-reverse（起点在右端）|column（主轴为垂直方向，起点在上沿）|column-reverse（起点在下沿）

默认情况下，项目都排在轴线上，flex-wrap定义轴线排不下，如何换行。flex-wrap：nowrap（默认，不换行）|wrap（换行，第一行在上方）|wrap-reverse（换行，第一行在下方）

flex-flow：是flex-direction属性和flex-wrap属性的简写形式

justify-content属性：定义了项目在主轴上的对齐方式，justify-content：flex-start（左对齐）|flex-end（右对齐）|center（居中对齐）|space-between（两端对齐，项目之间的间隔都相等）|space-around（每个项目两侧的间隔都相等，所以项目之间的间隔比项目与边框的间隔大一倍）;

align-items定义项目在交叉轴上如何对齐 align-items:flex-start(顶端对齐)|flex-end（底部对齐）|center（竖直方向上居中对齐）|baseline（item第一行文字的底部对齐）|stretch（当item未设置高度时，item将和容器等高对齐）;

align-content定义了当有多根主轴时，多行在交叉轴轴上的对齐方式。

4、flex item属性

item的属性在item的style中设置

order的值是整数，默认为0，整数越小，item排列越靠前

flex-grow

定义了当flex容器有多余空间时，item是否放大。默认值为0，即当有多余空间时也不放大；可能的值为整数，表示不同item的放大比例，如

<div class="wrap">
    <div class="div" style="flex-grow:1"><h2>item 1</h2></div>
    <div class="div" style="flex-grow:2"><h2>item 2</h2></div>
    <div class="div" style="flex-grow:3"><h2>item 3</h2></div>
</div>

即当有多余空间时item1、item2、和item3以1：2:3的比例放大。

flex-shrink

flex-basis表示项目在主轴上占据的空间，默认值为auto

flex是flex-grow，flex-shrink和flex-basis三属性简写总和

align-self允许item有自己独特的交叉轴上的对齐方式，默认值为auto

https://blog.csdn.net/dx18520548758/article/details/54316024/