[阮一峰語法篇](http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html) [阮一峰實戰篇](http://www.ruanyifeng.com/blog/2015/07/flex-examples.html) ~~~ justify-content: flex-start|flex-end|center|space-between|space-around|space-evenly; ~~~ - space-between兩端對齊，子元素之間的間隔相等 - space-around子元素之間的間隔,比子元素到父元素邊框的間隔大一倍 - space-evenly父元素的邊界到子元素之間的間隔,和子元素與子元素之間的間隔相等(所有的間隔相等) ~~~ .box{ justify-content:space-evenly; } ~~~ ~~~ //設置垂直方向的對齊 align-items:flex-start | flex-end | center | stretch //stretch在沒有高度的情況下自動拉升 ~~~ # 教程總結 # flex布局總結 ~~~ <div class="box"> </div> //css .box{ display:flex } ~~~ ~~~ //能夠給父元素設置的屬性 justify-content -- 設置子元素水平方向 align-items--設置子元素垂直方向 flex-direction -- 設置子元素的排列方向 flex-wrap --子元素是否換行 ~~~ ~~~ //能夠給子元素設置的屬性 order flex align-selft ~~~