[阮一峰语法篇](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 ~~~