css弹性布局

表格布局 display:table-cell;

1、表格布局display:table-cell;

1、表格布局display:table-cell; <div class="table"
div class="left">eeee</div><div class="right">eeee</div></div> 
</div>

浮动布局

2、浮动
对自身影响，脱离文档流,使元素独立起来并且可以设置宽高对兄弟元素影响，改变兄弟元素布局
对父容器影响是造成坍塌

定位布局

3、定位
固定布局，使用标准px单位
流式布局，使用百分比%

多列布局

4、多列布局父容器上设置行宽column-width: 200px;

弹性布局

/父容器上的属性!
/display: flex;弹性盒模型，默认主轴方向是x轴，起始线是左边开始//flex-direction改变主轴方向，
row x轴为主轴，
columy轴为主轴，
row-reverse x轴为主轴,起始线从右开始
column-reverse y轴为主轴,起始线从下开始
flex-wrap: wrap;默认是nowrap不换行，子元素在父元素中换行
flex-flow 以上两种的综合属性
justify- content:设置子元素在父容器中主轴的排列位置的。
space-between;两端对齐，有空余会分配给每个子元素中间space-around 将剩余空间分成元素的2倍，分别在元素的左右分配space-evenly 平均分配剩余空间
align-items : center;设置侧轴上居中
子元素上的属性
align-self: flex-end;设置元素在侧轴的位置*
*#box .box_son :nth-child(3){
align-self: flex-end;}