【CSS】布局、弹性布局

表格布局：

display:table-cell;

优点：简单易懂
缺点：标签结构过多，运行缓慢；

浮动布局：

特点：
浮动对自身影响:脱离文档流，使元素独立起来并且可以设置宽高；
对兄弟元素影响:改变兄弟元素布局；
对父容器影响:如父元素为设置宽高，会造成父元素坍塌

定位布局：

使用position属性对元素进行定位
一般情况：使用固定布局，使用标准 px 单位设置元素宽高;
还可以使用流式布局，使用百分比 % 单位设置元素宽高;

多列布局：

coulumn
多列布局就是几个元素呈现水平方式排列的效果

常用属性：
column-width:定义多列中每列的宽度;
column-count：用来定义多列中的列数;

弹性布局：

display:flex;
主轴:弹性元素的排列方向成为主轴
侧轴:与主轴垂直方向的称为侧轴

flex-direction:column;改变主轴方向，row 则X轴为主轴，column 则Y轴为主轴；
column-reverse;Y轴为主轴，起始线位置为下方开始
flex-direction:row(默认值，元素在父容器中水平排列（从左向右排列）)
flex-direction:row-reverse(元素在父容器中反方向向水平排列（从右向左排列）)
flex-direction:column(元素在父容器中纵向排列（自上向下排列）
flex-direction:column-reverse(元素在父容器中反向纵向排列（自下向上排列）)
flex-wrap:nowrap;(默认值 元素不会自动换行)
flex-wrap(设置弹性元素是否在弹性容器中自动换行)
flex-flow:方向 换行;以上两种的总和属性，
justify-content:flex-start;//起始线开始排列 flex-end//终止线开始排列 center//中间扩散排列
justify-content:space-between;//设置子元素在父容器中，主轴的排列位置的，
				space-between;两端对齐，有空余会分配给每个子元素之间	
justify-content:spance-around;//将剩余空间分成元素的2倍的份数，分别在元素的左右分配
justify-content:spance-evenly;//平均分配剩余空间			
align-items:center;//设置侧轴上居中
align-self:flex-end;//设置元素在侧轴的位置