弹性盒布局

布局原理：

flex是flexble Box的缩写，意为弹性布局，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局

1、当我们为父元素设为flex布局以后，子元素的float、clear和vertical-align属性都将失效

2、伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局

采用flex布局的元素，称为flex容器（flex container），简称‘容器’。它的所有子元素自动成为容器成员，称为flex项目（flex item），简称'项目'。

总结flex布局原理：

就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式

flex-direction 决定主轴的方向（即项目的排列方向）

flex-direction: row; row （默认item从左到右的顺序排列）主轴为水平方向,起点在左端、右端

flex-direction:row-reverse; row-reverse (会改变item的排列方向 改为从右到左的顺序 主轴仍然是水平方向

column 、column-reverse: 主轴为垂直方向，起点在上沿。下沿

flex-direction: column;        column 会改变主轴方向 改成垂直方向 是从上到下的顺序排列项目

flex-direction: column-reverse; column-reverse 会改变顺序 改成从下到上的顺序 主轴还是垂直方向

flex-wrap       定义如果在一条轴线排不下 如何换行。

默认情况下，项目都排在一条线上（又称轴线）。

flex-wrap: wrap;         wrap表示换行，第一行在上方

flex-wrap: wrap-rever;         wrap-rever表示换行，第一行在下方

flex-flow:column wrap;         flex-flow是复合属性：是flex-direction和 flex-wrap的简写形式，默认值为row nowrap

justity-conten 定义了项目在主轴上的对齐方式

justify-content：flex-start；  默认值 ，左对齐

justify-content：flex-end；   右对齐

justify-content：center；   居中 就算有margin也会把整个item居中 并且左右两边item的距离边框的大小相等

justify-content：space-between；两端对齐，项目之间距离都相等(就算item设置了margin 项目之间的距离也相等)

justify-content：space-around；

每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍

不受margin的干扰 会把margin的大小计算在内

justify-content：space-evenly ；  item项目之间左右的间距 以及项目和边框之间的间距 都相等

会受到子元素item设置margin的影响  item距离两边的距离相等  item项目之间的距离相等

但是 item距离两侧的距离 和item项目之间的距离 不相等

align-items 定义项目在交叉轴上对齐方式

align-items: flex-start;    默认值，交叉轴的起点对齐

align-items: flex-end;     交叉轴的终点对齐

align-items: center;      交叉轴的中点对齐

align-items: baseline;      项目的第一行文字的基线对齐

align-items: stretch;      stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度