浅谈flex

flex,一种比float方便，比position更广用的布局方式，flex分为两部分，一部分是伸缩容器上设置的属性，另一部分是项目伸缩项目上设置的属性
伸缩容器上设置是指在父级里设置的属性，其中包括：

flex-direction

flex-direction 是指设置子级的排列方向，有四种样式

row:主轴为X轴，延X轴从左到右排列
row-reverse:主轴为X轴，延X轴从右到左排列
column:主轴为Y轴，延Y轴从上到下排列
column-reverse:主轴为Y轴，延Y轴从下向上排列

flex-direction: row;

1.png

)
flex-direction:row-reverse;

2.png
flex-direction:column; 3.png

flex-direction:column-reverse;

4.png

]

第二个属性，justify-content,是指子级的对齐方式，有六个样式，

flex-start:定义元素在主轴起始位置对齐
flex-end:定义元素在主轴结束位置对齐
center:定义内容元素在主轴的中心位置对齐
space-between:定义元素平均分配在主轴上，其中第一个紧靠主轴开始位置，最后一个紧靠主轴结束位置
space-around:定义元素平均分配在主轴上，并且每一行上均匀分配弹性元素，相邻元素距离相同，每行第一个元素到行首距离与最后一个元素到行尾距离相同

justify-content: flex-start;

1.png

justify-content: flex-end;

5.png

justify-content: center;

6.png

justify-content: space-between;

7.png

第三个属性，align-items,定义元素在交叉轴上的对齐方式

stretch:默认值，当项目未设置高的时候，项目被拉伸以适应容器
center:项目位于容器的中心
flex-start:项目位于容器的开头
flex-end:项目位于容器的结尾
baseline:项目位于容器的基线上

align-items:stretch;

9.png

align-items:center

10.png

align-items:flex-start;

1.png

align-items:flex-end;

11.png

align-items:baseline;

12.png

第四种属性，flex-wrap,定义元素是否换行

nowrap:默认值，不换行
wrap:当第一行排不下的话，换行
wrap-reverse:相反的方向换行

flex-wrap:wrap,就是默认不换行
flex-wrap:wrap;

13.png

flex-wrap:wrap-reverse

14.png

伸缩容器上设置到这里就结束了。
项目伸缩项目上的设置
第一种属性，order,顺序属性，能设置或者改变盒子的顺序
例如：

<li style="2">1</li>
<li style="3">2</li>
<li style="1">3</li>

15.png

第二种属性，flex-grow,定义项目的放大比例，就是说如果父级宽度大于子级宽度之和，剩下的部分由被设置放大比例的子级填充，如果是多个子级，则多个子级按放大倍数的比例放大。

<div style="width: 420px;height: 300px;border:1px solid black;display: flex">
    <div style="width: 100px;height: 200px;background: lightblue;flex-grow: 2"></div>
    <div style="width: 100px;height: 200px;background: pink"></div>
    <div style="width: 100px;height: 200px;background: lightgreen;flex-grow: "></div>
</div>

16.png

第二种属性，flex-grow,定义项目的缩小比例，就是说如果父级宽度小于子级宽度之和，剩下的部分由被设置缩小比例的子级释放宽度，如果是多个子级，则多个子级按缩小倍数的比例缩小。
其中：flex-shrink默认值为1，缩小1倍，为0的时候不缩小。

<div style="width: 400px;height: 300px;border:1px solid black;display: flex">
    <div style="width: 200px;height: 200px;background: lightblue;flex-shrink: 3"></div>
    <div style="width: 200px;height: 200px;background: pink;flex-shrink: 0"></div>
    <div style="width: 200px;height: 200px;background: lightgreen;flex-shrink: 2"></div>

18.png

第三种属性，flex-shrink,
第四种属性，align-self,定义元素在交叉轴上的对齐方式

<div style="width: 420px;height: 300px;border:1px solid black;display: flex">
    <div style="width: 100px;height: 200px;background: lightblue;align-self: center"></div>
    <div style="width: 100px;height: 200px;background: pink"></div>
    <div style="width: 100px;height: 200px;background: lightgreen"></div>

17.png

第五种属性，flex-basis,相当于width使用。

以上便是flex的用法。