CSS布局

float布局

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

子元素上加float:left;和width

父元素上加.clearfix

可以做两栏、三栏、四栏、平均布局等。

flex布局

• container  容器

• item  内容

  .container{ display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: stretch; }

• flex-direction: row;表示item流动方向，还有row-reverse/colume/colume-reverse;

• flex-wrap: wrap;表示换行，还有nowrap;  默认为不换行。

• justify-content: flex-start;表示主轴（默认横轴）对齐方式flex-start;(靠左）flex-end;（靠右）center;(居中）space-between;(分散，顶着两边）space-around;(分散，两边有空）space-evenly;(空隙一样）

• align-items: stretch; 表示次轴（默认纵轴）对齐方式，flex-start;(顶部对齐）flex-end;(底部对齐）center;(中间对齐）strech;(拉伸至同一高度对齐）

• align-items:flex-start;表示多行内容对齐方式，很少用到。

  .item{order: $ flex-grow:1 flex-shrink:1 flex-basis; }

• flex-grow:控制长胖

• flex-shrink:控制变瘦，0防止变瘦，默认是1.

重点常用：

• display: flex;
• flex-direction: row;
• flex-wrap: wrap;
• justify-content: flex-start;
•  align-items: stretch;

grid布局

图片来自饥人谷

• grid-row/column-start/end:从第几根线到第几根线，也可用grid-column: 2 / 4;这种形式代表；grid-area: 1 / 1 / 3 / 6;分别表示grid-row-start, grid-column-start, grid-row-end, 最后是grid-column-end。
• grid-column-end: span 2; span只能是正值，表示前进两个单位。
• grid-template-columns: repeat(5, 20%);每份占20%，重复五次。也有100px、3em和40%、fr表示所占范围。