Flex布局

一、Flex布局

Flex是Flexible Box的缩写 flex布局表示弹性布局，可以为盒状模型提供最大的灵活性。

弹性盒子是由弹性容器和弹性子元素组成，弹性容器就是父元素，弹性子元素就是父元素里面的子元素。

1、任何一种元素都可以指定为flex布局

flex设定布局的方法和之前的方法不一样。它是给父元素设定属性，来确定子元素的布局模式。之前讲的布局，是通过设定元素自身来确定自己的布局模式。

语法：

块级元素：display：flex

行内元素：display：inline-flex

2、flex 常见术语 三个2

简记	术语
二成员	容器和项目(container / item)
二根轴	主轴与交叉轴(main-axis / cross-axis)
二根线	起始线(main / cross-start)与结束线（main / cross-end)

---

二、容器 container 属性

1、flex-direction 决定容器主轴的方向

row	默认值 item从左到右排列） 主轴为水平方向，起点在左端，结束在右端
row-reverse	item从右到左排列 ，主轴为水平方向，起点在右端，结束在左端
column	item从上到下排列)，主轴为垂直方向，起点在上沿，结束在下沿
column-reverse	会改变顺序，从下到上的排列，主轴为垂直方向，起点在下沿，结束在上沿

代码如下：

---

2、 flex-wrap 当项目在一条轴上排不下，如何换行

nowrap	（默认）不换行
wrap	换行，第一行在上方
wrap-reverse	换行，第一行在下方，上下顺序颠倒

① nowrap （默认）不换行

说明：设置的项目的宽度就失效了，强行在一行显示

---

 ②wrap  正常换行，第一个位于第一行的第一个

当第一行剩下的位置不够排列下一个项目，会换行

---

③wrap-reverse  向上换行，第一行位于下方（顺序颠倒）

---

3、flex-flow属性是flex-deriction和flex-wrap属性的简写

属性值：默认值为[row nowrap]，两个属性的值即可，只写一个值，另一个就是默认值

第一个属性值为flex-direction的属性值

第二个属性值为flex-wrap的属性值

---

4、justify-content  用于设置项目在容器中的主轴对齐方式

flex-start	默认值，左对齐
flex-end	右对齐
center	居中对齐 就算有margin，也会把整个item居中，并且左右两边距离相等
space-between	两端对齐，项目之间的间隔都相等，就算设置了margin，项目之间的间隔也相等
space-around	每个项目两侧的间隔相等，项目之间的间隔比项目到边框间隔大1倍 ，不受margin的影响，会把margin的大小计算在内
space-evenly	项目与项目之间的间距 以及 项目和边框的间距都相等

① flex-start  默认值，左对齐

---

② flex-end  右对齐

---

③ center  居中对齐

（就算有margin，也会把整个item居中，并且左右两边距离相等）

---

④ space-between 两端对齐，项目之间的间隔都相等

（就算设置了margin，项目之间的间隔也相等）

---

⑤ space-around  每个项目两侧的间隔相等，项目之间的间隔比项目到边框间隔大1倍

（不受margin的影响，会把margin的大小计算在内）

---

⑥ space-evenly  项目与项目之间的间距 以及 项目和边框的间距都相等

（☆会受到子元素item设置的margin的影响）

 设了margin：15px 后，项目之间的间距会受到影响

---

5、align-items定义了项目在交叉轴上是如何对齐显示的

flex-start	交叉轴的起点对齐，默认值
flex-end	交叉轴的终点对齐
center	交叉轴的中点对齐,在盒子中间
baseline	项目的第一行文字的基线对齐
stretch	默认值：如果项目没有设置高度或者设置为auto，将占满整个容器高度

① flex-start  交叉轴的起点对齐，默认值

---

 ②flex-end  交叉轴的终点对齐

---

 ③center   交叉轴的中点对齐,在盒子中间

---

 ④baseline    项目的第一行文字的基线对齐

（需要给第一行item的文字设置行高line-height，下面我就给第一个盒子设置了15px的行高，后面的盒子就与第一个盒子有15px的距离）

---

 ⑤stretch默认值：如果项目没有设置高度或者设置为auto，将占满整个容器高度