flex弹性盒子布局

当元素设置display:flex; 或者display:inline-flex; 

则该元素即设置了弹性盒子布局。

弹性盒子布局的主要思想即为使父元素能够调整子元素的排列方式。

当设置flex布局后，子元素的float、clear、vertical-align会失效。

采用flex布局的元素，成为flex容器，子元素则成为flex项目。

容器又两根轴，主轴，即为水平方向，默认的轴线。侧轴，即为垂直方向。

容器的属性

flex-direction

设置主轴方向

属性值	作用
row	默认，水平方向，从左往右
row-reverse	水平方向，从右往左
column	垂直方向，从上往下
column-reverse	垂直方向，从下网上

flex-wrap

设置项目在容器宽度不足时是否换行

nowrap，不换行时，宽度不足时自动调整项目的宽度，让其自适应父元素宽度

wrap，换行，且往下换

wrap-reverse，换行。往上换，从下往上排列

 flex-flow

flex-direction和flex-wrap的缩写，即可以写其中任意一个值，也可以只写一个值。

所以用flex-flow更方便

justify-content

项目在主轴的对齐方式，默认为水平方向

flex-start	左对齐
flex-end	右对齐
center	居中
space-between	两端对齐 项目之间间隔相等
space-around	项目之间间隔相等 项目与边框的距离为间隔距离的一半

align-items

项目在交叉轴上的对齐方式

flex-start	上对齐
flex-end	下对齐
center	居中
baseline	以项目第一行文字的基线对齐
stretch	默认，项目在垂直方向拉伸，如果项目没有设置高，则拉满容器

 

align-content

多根轴线对齐方式，属性与align-items的一样，唯一的区别就是content是多根轴线，需要配合wrap换行

项目的属性

order

定义项目的排列顺序，数值越小，排列越靠前

    <div class="container">
        <div class="box" style="order: 2;">1</div>
        <div class="box" style="order: 3;">2</div>
        <div class="box" style="order: 1;">3</div>
    </div>

flex-grow

定义项目的放大比例，撑满主轴方向 

当项目2设置flex-grow为1，当容器还有空间时，则撑满主轴方向，实现自适应

flex-shrink

定义项目的缩小比例，当容器空间不足时，等比例缩小

项目2设置flex-shrink为1

flex-basis

项目的基础尺寸，与width类似，当设置后width将失效

需要与flex-grow和flex-shrink搭配使用

flex

flex-grow、flex-shrink和flex-basis的缩写

flex：0

等同于设置flex:0 1 0%，当容器有剩余空间时，元素尺寸为最小内容宽度

flex：none

等同于设置flex:0 0 auto，元素尺寸为最大内容宽度

flex：1

等同于设置flex:1 1 0%，元素会自动放大或缩小，一般用于自适应布局

flex：auto

等同于设置flex：1 1 auto，元素自动放大或缩小

两个的区别为，flex：1在容器不足时优先最小化内容尺寸；flex：auto在容器不足时优先最大化内容尺寸

flex：1的应用场景为当元素充分利用剩余空间，同时不会侵占其他元素应有的宽度时 

flex：0的应用场景为当元素充分利用剩余空间，但是元素各自的尺寸又需要按照各自内容进行分配

align-self

子元素对齐方式，可覆盖align-items

默认auto，继承父类的align-items