CSS3 Flex布局和Grid布局

 

1 flex容器的六个属性

flex实现垂直居中：

<div class="box">
  <span class="item"></span>
</div>

.box {
  display: flex;
  justify-content: center;
  align-items: center;
}

 

1 flex-direction
.box {
  flex-direction: row | row-reverse | column | column-reverse;
}

2 flex-wrap 不换行，换行，换行且第一行在下方
.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

3 flex-flow 前两项属性简写，默认 row nowrap
.box {
  flex-flow: <flex-direction> || <flex-wrap>;
}

4 justify-content:主轴位置，左对齐，右对齐，居中，两端对齐，项目两侧距离相等
.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

5 align-itemsY轴对齐：上，下，居中，基线，占满
.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

6 align-content 带基线对齐
.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

 2 Flex元素属性

1 Flex元素的属性

1 flex:flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto
.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
/*
两个快捷值：auto (1 1 auto) 和 none (0 0 auto)
*/

2 order属性，默认0，填写可设置元素顺序

3 align-self
.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool

http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

3 Grid布局，将页面表示为栅格

CSS Grid 没有替换 flexbox 属性，尽可能保留了它的功能，可以在 Grid中使用justify-content和align-items等属性

<div class='wrapper'>
  <div class='letter'>
    1
  </div>
  <div class='letter'>
    2
  </div>
  <div class='letter'>
    3
  </div>
  <div class='letter'>
    4
  </div>
</div>

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;

  @media screen and (min-width: 500px) {
    grid-template-columns: 1fr 1fr 1fr;
  }
/*当宽大于800px时显示为四列*/
  @media screen and (min-width: 800px) {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}
/**/
.wrapper {
  display: grid;
  grid-template-columns: 3fr 1fr 1fr;/*第一列显示为第二列的三倍*/
  grid-template-rows: 1fr 3fr;
}