flex布局详解

1.1概念结构

开启flex布局，里面flex items不再区分块级和行内元素

最外层用一个盒子包裹，名字：flex container

​ 里面小盒子：flex items

开启flex布局 display:flex 块级元素(外级盒子成为何种元素)

​ display:inline-flex 行内块元素

1.2应用在flex container/最外层包裹的大盒子上的css属性

1.2.1 flex-direction (决定了主轴的方向)

row：默认值，主轴的方向从左到右

row-reverse: 主轴方向从右到左

column: 主轴方向从上到下

**column-reverse:**主轴方向从下到上

1.2.2 justify-content（决定了子盒子在主轴方向上的排列方式）

1.2.3 align-items (决定了子盒子在交叉轴方向上的对齐方式)

各个盒子基准线高度不一致，以最低的基准线为准

align-items:baseline

1.2.4 flex-wrap 决定了flex container 是单行显示还是多行显示

默认情况下所有子盒子会在同一行显示

1.2.5 align-content 决定多行的子盒子在交叉轴上的对齐方式

1.3应用在flex items/小盒子上的css属性

1.3.1 order

order：数值，小盒子数值越小越靠前，默认是0

1.3.2 align-self 小盒子单独决定对齐方式

1.3.3flex-grow 将剩余空间等分扩充

1.3.4flex-shrink 将溢出空间等分收缩

1.3.5 flex-basis

1.3.6 flex 缩写