float布局

步骤

  • 在子元素上加float:left和width

  • 在父元素上加.clearfix

    经验

  • 留一个空间或最后一个不设置width

  • 这个布局专门为ie准备，所以不需要做响应式
  • ie6/7存在双倍margin bug解决办法有两个：①针对ie6/7margin减半②加一个display:inline-block

float定位必要的css代码

  1. .clearfix:after {
  2.   content: '';
  3.   display: block;
  4.   clear: both;
  5. }

flex布局

让一个元素变成flex容器

  1. .container {
  2.   display: flex | inline-flex;
  3. }

改变items的流动方向

  1. .container {
  2.   flex-direction: row | row-reverse | column | column-reverse;
  3. }

改变折行

  1. .container {
  2.   flex-wrap: wrap | nowrap | wrap-reverse;
  3. }

主轴对齐方向

  1. .container {
  2.   justify-content: flex-start | flex-end | center | space-between | space-around;
  3. }

次轴对齐

  1. .container {
  2.   align-items: flex-start | flex-end | stretch | center | baseline;
  3. }

多行内容

  1. .container {
  2.   align-content: flex-start | flex-end | stretch | center | space-between | space-around;
  3. }

flexitem的属性

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • align-self

    grid布局

    成为container

    1. .container {
    2. display: grid | inline-grid;
    3. }

    行和列

    1. .container {
    2. grid-template-columns: 40px 50px auto 50px 40px;
    3. grid-template-rows: 25% 150px auto;
    4. }

    item可以设置范围

    1. .item-a {
    2. grid-column-start: 2;
    3. grid-column-end: five;
    4. grid-row-start: row1-start;
    5. grid-row-end: 3;
    6. }

    fr - free space

    1. .container {
    2. grid-template-columns: 1fr 1fr 1fr;
    3. grid-template-rows: 1fr 50px 1fr 1fr;
    4. }