这是我参与「第四届青训营 」笔记创作活动的第3天
导言
CSS3引入了一种新的布局模式——Flexbox布局，用来提供一个更加有效的方式制定、调整和分布一个容器里项目布局，即使它们的大小是未知或者动态的，可以轻松的实现屏幕和浏览器窗口大小发生变化时保持元素的相对位置和大小不变，同时减少了依赖于浮动布局实现元素位置的定义以及重置元素的大小。
flex容器
先指定一个容器，设定为 flex 布局。使用块元素如 div，可以使用 flex，而如果你使用行内元素，可以使用 inline-flex。
例如：
.container { display: flex | inline-flex; }
1.flex-direction
.container { flex-direction: row | row-reverse | column | column-reverse; }
①默认值：row，主轴为水平方向，起点在左端。
②row-reverse：主轴为水平方向，起点在右端。
③column：主轴为垂直方向，起点在上沿。
④column-reverse：主轴为垂直方向，起点在下沿。
2. flex-wrap
.container { flex-wrap: nowrap | wrap | wrap-reverse; }
①默认值：nowrap 不换行，即当主轴尺寸固定时，当空间不足时，项目尺寸会随之调整而并不会挤到下一行。
②wrap：项目主轴总尺寸超出容器时换行，第一行在上方。
③wrap-reverse：项目主轴总尺寸超出容器时换行，第一行在下方。
3. justify-content
.container { justify-content: flex-start | flex-end | center | space-between | space-around; }
①默认值: flex-start左对齐。
②flex-end：右对齐。
③space-between：两端对齐，项目之间的间隔相等，即剩余空间等分成间隙。
④space-around：每个项目两侧的间隔相等，所以项目之间的间隔比项目与边缘的间隔大一倍。
总结
通过给父盒子添加flex属性可以来控制子盒子的位置和排列方式，但需要注意的是，当为盒子设为flex布局以后，子元素的float，clear和vertical-align属性将失效。
