CSS布局

1.float布局

特点：

1. 兼容性好

2. 布局繁琐

3. 不能很好的在移动端布局

子元素加上float:left或者float:right，在其父元素上必须加上clearfix

.clearfix{
    content:''; 
    display: block; 
    clear: both;
}

2.flex布局

特点：

1. 操作方便，布局简单，移动端应用多

2. PC 端浏览器支持结果较差

3. 仅支持部分IE

让一个元素变为flex容器：

display: flex; 

或者 display: inline-flex;

flex的container样式：

改变主轴流动方向(x,y轴)

flex-direction:row; // 从左向右

flex-direction:row-reverse; // 从右向左

flex-direction:column; // 从上到下

flex-direction:column-reverse; // 从下到上

换行

tips: flex盒子是弹性盒子，有多少空间就挤多少空间,不会自动换行

flex-wrap: nowrap; // 不换行(默认)

flex-wrap: wrap; // 换行

flex-wrap:wrap-reverse; // 从底部开始向上换行

主轴对齐方式 (默认主轴是横轴,除非改变了flex-direction的方向)

justify-content: flex-start;

justify-content: flex-end;

justify-content: center；

justify-content: space-between;

justify-content: space-around;

justify-content: space-evenly;

次轴对齐方式(默认次轴是纵轴)

align-items: flex-start;

align-items: flex-end;

align-items: center;

align-items: stretch; // 如果items未设置高度或者设置为auto，将占满容器的高度

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

flex-item属性

• 在item中添加order, 可以进行排序.默认的order为0，负数最小，从小到大排列

• 在item中添加flex-grow, 可以控制item如何变胖,用来分配空间，默认值为0不扩张，如果给2号flex-flow，那么1和3不动，多余的空间都给2

• 在item中添加flex-shrink, 可以控制item如何变瘦

重点：

display: flex;
flex-direction: row / column;
flex-wrap: wrap;
justify-content: center / space-between;
align-items: center;

3..grid布局

二维布局使用grid布局，这种布局尤其适合不规则布局