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;
}