flex布局又被称为弹性布局，其出现替代了很多经典的布局方式，下面从flex布局中经常会用到的样式和样式的运用来展开。
flex布局在块级容器中可以直接使用display:flex来表示容器内的布局为flex布局
.container{ display:flex; }而对于行内标签，display的属性值可以设置为inline-flex来表示行内标签里面的布局为flex布局
.inline-container{ display:inline-flex; }对于webkit内核的浏览器，必须添加上-webkit前缀
.webkit-container{ display: -webkit-flex; display: flex; }注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效
flex-direction表示flex中元素的排列方式，默认为row
.container{ flex-direction: row | row-reverse | column | column-reverse; }row：从左到右水平排列
row-reverse：从右到左水平排列
column：从上到下垂直排列
column-reverse：从下到上垂直排列
<div class="dir-row"> <span>1</span> <span>2</span> <span>3</span> <span>4</span> </div> <div class="dir-row-reverse"> <span>1</span> <span>2</span> <span>3</span> <span>4</span> </div> <div class="dir-column"> <span>1</span> <span>2</span> <span>3</span> <span>4</span> </div> <div class="dir-column-reverse"> <span>1</span> <span>2</span> <span>3</span> <span>4</span> </div> div { display: flex; width: 100px; height: 100px; } .dir-row { flex-direction: row; } .dir-row-reverse { flex-direction: row-reverse; } .dir-column { flex-direction: column; } .dir-column-reverse { flex-direction: column-reverse; }flex-wrap设置flex容器中当一行中的内容超过容器宽度时的排列处理方式，默认为nowrap
.container{ flex-wrap: nowrap | wrap | wrap-reverse; }nowrap：会将超过的内容“强行”挤在同一行，假如元素间有margin值的话会压缩margin值，如果没有的话会压缩每个元素的宽度
wrap：会将超过的元素放到下一行
wrap-reverse：会将超过的元素放在当前行，而没超过的元素放在下一行
<div class="wrap-nowrap"> <span>1</span> <span>2</span> <span>3</span> <span>4</span> </div> <div class="wrap-wrap"> <span>1</span> <span>2</span> <span>3</span> <span>4</span> </div> <div class="wrap-wrap-reverse"> <span>1</span> <span>2</span> <span>3</span> <span>4</span> </div> div { display: flex; width: 90px; height: 30px; margin-bottom: 40px; } span { display: inline-block; width: 30px; color: white; background-color: red; } .wrap-nowrap { flex-wrap: nowrap; } .wrap-wrap { flex-wrap: wrap; } .wrap-wrap-reverse { flex-wrap: wrap-reverse; }flex-flow是flex-direction和flex-wrap合起来写的样式，默认值为row nowrap
.container{ flex-flow: <flex-direction> || <flex-wrap>; }该样式用于设置容器内元素在水平方向上的对齐方式，默认值为flex-start
.container{ justify-content: flex-start | flex-end | center | space-between | space-around | evenly; }flex-start：左对齐
flex-end：右对齐
center：居中
space-between：元素紧贴容器左右两端，元素间的间距相同
space-around：元素与容器左右两端距离为元素间距离的一半，元素间的间距相同
space-evenly：元素间的间距相同，且两端元素和元素间的间距也是相同的
<div class="start"> <span>1</span> <span>2</span> <span>3</span> <span>4</span> </div> <div class="end"> <span>1</span> <span>2</span> <span>3</span> <span>4</span> </div> <div class="center"> <span>1</span> <span>2</span> <span>3</span> <span>4</span> </div> <div class="between"> <span>1</span> <span>2</span> <span>3</span> <span>4</span> </div> <div class="around"> <span>1</span> <span>2</span> <span>3</span> <span>4</span> </div> <div class="evenly"> <span>1</span> <span>2</span> <span>3</span> <span>4</span> </div> div { display: flex; width: 200px; margin-bottom: 30px; background-color: black; } span { display: inline-block; width: 20px; color: white; background-color: red; } .start { justify-content: flex-start; } .end { justify-content: flex-end; } .center { justify-content: center; } .between { justify-content: space-between; } .around { justify-content: space-around; } .evenly { justify-content: space-evenly; }该样式用于设置容器内元素在垂直上的对齐方式，默认值为stretch
.container{ align-items: flex-start | flex-end | center | baseline | stretch; }flex-start：以容器的顶部来对齐
flex-end：以容器的底部来对齐
center：以容器的中间来对齐
baseline：按容器内元素的文字来对齐
stretch：当容器内元素没设置高度时默认占满整个容器高度
<div class="start"> <span class="s1">1</span> <span class="s2">2</span> <span class="s3">3</span> <span class="s4">4</span> </div> <div class="end"> <span class="s1">1</span> <span class="s2">2</span> <span class="s3">3</span> <span class="s4">4</span> </div> <div class="center"> <span class="s1">1</span> <span class="s2">2</span> <span class="s3">3</span> <span class="s4">4</span> </div> <div class="baseline"> <span class="s1">1</span> <span class="s2">2</span> <span class="s3">3</span> <span class="s4">4</span> </div> <div class="stretch"> <span>1</span> <span>2</span> <span>3</span> <span>4</span> </div> div { display: flex; width: 200px; height: 100px; margin-bottom: 10px; background-color: black; } span { display: inline-block; width: 40px; text-align: center; color: white; background-color: red; } .s1 { height: 20px; line-height: 10px; } .s2 { height: 40px; line-height: 20px; } .s3 { height: 60px; line-height: 30px; } .s4 { height: 80px; line-height: 40px; } .start { align-items: flex-start; } .end { align-items: flex-end; } .center { align-items: center; } .baseline { align-items: baseline; } .stretch { align-items: stretch; }该样式设置了容器内多行元素的对齐方式，只有一行时该样式无效，默认值为stretch
.container{ align-content: flex-start | flex-end | center | space-between | space-around | stretch; }flex-start：第一行紧贴顶部
flex-end：最后一行紧贴底部
center：中间一行居中，其他行贴紧中间行
space-between：不同行行距相同，第一行和最后一行与容器顶部底部贴紧
space-around：不同行行距相同，第一行和最后一行与容器顶部底部距离为行距的一半
stretch：各行占满容器
<div class="start"> <p>1</p> <p>2</p> <p>3</p> </div> <div class="end"> <p>1</p> <p>2</p> <p>3</p> </div> <div class="center"> <p>1</p> <p>2</p> <p>3</p> </div> <div class="between"> <p>1</p> <p>2</p> <p>3</p> </div> <div class="around"> <p>1</p> <p>2</p> <p>3</p> </div> <div class="stretch"> <p>1</p> <p>2</p> <p>3</p> </div> div { display: flex; width: 100px; height: 90px; margin-bottom: 10px; flex-wrap: wrap; background-color: black; } p { width: 100px; height: 20px; margin: 0px; color: white; background-color: red; } .start { align-content: flex-start; } .end { align-content: flex-end; } .center { align-content: center; } .between { align-content: space-between; } .around { align-content: space-around; } .stretch { align-content: stretch; }参考自阮一峰的flex布局教程
