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从上到下排列)，主轴为垂直方向，起点在上沿，结束在下沿