CSS 布局，弹性盒子

1.float实现横向布局 需要向横着布局的元素添加float属性，取值有left和right

存在问题：

使用float之后，所在父级元素无高度，会导致下方的元素向上移动

解决办法：

1.给父级元素设置高度height:70px;(不推荐)

2.给父级元素设置overflow:hidden ;达到父级元素都随自己元素高度自适应效果(推荐)

无法解决的问题：

1.元素均分父级，需要计算而且不一定能均分

2.元素之间的间距均匀分布，需要计算而且不一定能均分

3.书写比较繁琐

2.内联块级元素实现横向布局 需要向横向布局的元素添加 display:inline-block;

让其变为内联块级元素，内联块级元素特征：不独占一行

存在问题：

使用display:inline-block之后元素之间产生莫名的空隙，对整体的布局产生影响

产生原因：

浏览器会把空格换行都当成空白

解决办法：

1.把元素首尾相连(不推荐)

2.对文字大小进行处理 给使用display:inline-block的父级元素设置字体大小为0，并且该元素要设置有效的字体大小

无法解决的问题：

1.元素均分腹肌，需要计算而且不一定能均分

2.元素之间的间距均匀分布，需要计算而且不一定能均分

3.书写比较繁琐

3.弹性盒子布局 给要横着布局的元素的父级元素添加display:flex;

相关配套属性

1.flex-direction控制弹性盒子内子元素的排列方向，取值如下

column 纵向从上到下排列 column-reverse纵向从下到上排列

row 横向从左到右排列 row-reverse横向从右到左排列

2.flex-wrap控制弹性盒子内子元素是否换行 取值如下

nowrap不换行

wrap换行

3.order设置弹性盒子内子元素的排列顺序(作用到子元素上)

取值为整数，值越小该子元素越靠前

4.flex复合属性 控制弹性盒子内子元素的缩放比例(作用到子元素上)

flex-grow拉伸因子

flex-shrink压缩因子

flex-basis基准因子

5.justify-content控制弹性盒子内子元素的分布方式 取值如下

flex-start 代表在排列方向上的开始位置分布

flex-end 代表在排列方向上的结束位置分布

center 代表在排列方向上的中间位置分布

space-between 代表空白均匀放到元素和元素之间

space-evenly 代表空白均匀放到各个间隙

space-around 代表空白分布到元素周围

6.align-items控制弹性盒子内子元素在垂直方向上的对齐方式

flex-start 顶部对齐

flex-end 底部对齐

center 居中对齐

basseline 首行底部对齐

7.align-content是指弹性盒子内多行的分布方式

flex-start 所有行都靠近顶部

flex-end 所有行都靠近底部

center 所有行都居中

space-between 空白放到航宇航之间

space-around 空白放到行的上下两侧

space-evenly 空白分布到各个间隙