公共样式：
* { margin: 0; padding: 0; } .has-flex { display: flex; }
垂直居中 子元素左右分布css
.father-one { width: 100%; height: 200px; background-color: #fffcef; align-items: center; /*纵轴）方向上的对齐方式。*/ justify-content: space-between; /* 均匀排列每个元素 首个元素放置于起点，末尾元素放置于终点,中间元素的中间间隔相等 */ justify-content: space-around; /* 均匀排列每个元素 每个元素周围分配相同的空间 */ justify-content: space-evenly; /* 均匀排列每个元素 每个元素之间的间隔相等 */ } .fa-one-child1 { height: 30px; width: 30px; background-color: #a6acde; } .fa-one-child2 { height: 40px; width: 40px; background-color: #e4b9f0; } .fa-one-child3 { height: 50px; width: 50px; background-color: #f3b009; } .fa-one-child4 { height: 60px; width: 60px; background-color: #f77c4f; }
html
<!--垂直居中 子元素左右分布 star--><h3>垂直居中 子元素左右分布</h3><div class="father-one has-flex"> <div class="fa-one-child1"></div> <div class="fa-one-child2"></div> <div class="fa-one-child3"></div> <div class="fa-one-child4"></div></div><!--垂直居中 子元素左右分布 end-->
水平垂直居中css
.father-two { width: 100%; height: 200px; align-items: center; /*纵轴）方向上的对齐方式。*/ justify-content: center; /* 横轴）方向上的对齐方式*/ background-color: red; } .child { width: 50%; height: 60px; background-color: rosybrown; }
html
<!--水平垂直居中 star--><h3>水平垂直居中</h3><div class="father-two has-flex"> <div class="child"></div></div><!--水平垂直居中 end-->
水平垂直居中 图标在上文字在下css
.father-three { height: 80px; background-color: #f77c4f; align-items: center; justify-content: center; flex-direction: column; }
html
<!--水平垂直居中 图标在上文字在下 star--><h3>水平垂直居中 图标在上文字在下</h3><div class="has-flex father-three"> <i class="fa fa-file-text-o" aria-hidden="true"></i> <p>测试</p></div><!--水平垂直居中 图标在上文字在下 end-->
子元素平分父元素,且自适应等高css
.father-four { background-color: #ffd5eb; } .fa-four-child { flex: 1; text-align: center; background-color: #ffffff; border: 1px solid; }
html
<!--子元素平分父元素,且自适应等高 star--><h3>子元素平分父元素,且自适应等高 </h3><div class="has-flex father-four"> <div class="fa-four-child">第一个</div> <div class="fa-four-child">第二个</div> <div class="fa-four-child">第三个</div> <div class="fa-four-child" style="height: 90px">第四个</div></div><!--子元素平分父元素,且自适应等高 end-->
子元素平分父元素,两边对齐中间自适应相同宽度间隔，且自动换行css
.father-five { height: 100px; background-color: #a6acde; justify-content: space-between; flex-wrap: wrap; } .fa-five-child { width: 21%; background-color: #f77c4f; }
html
<!--子元素平分父元素,两边对齐中间自适应相同宽度间隔，且自动换行 star--><h3>子元素平分父元素,两边对齐中间自适应相同宽度间隔，且自动换行 </h3><div class="has-flex father-five"> <div class="fa-five-child">第一个</div> <div class="fa-five-child">第二个</div> <div class="fa-five-child">第三个</div> <div class="fa-five-child">第四个</div> <div class="fa-five-child">第五个</div> <div class="fa-five-child">第六个</div> <div class="fa-five-child">第七个</div> <div class="fa-five-child">第八个</div></div><!--子元素平分父元素,两边对齐中间自适应相同宽度间隔，且自动换行 end-->
三栏布局,两边固定宽中间自适应css
.father-six { height: 100px; } .one-child, .three-child { width: 300px; background-color: #a6acde; } .two-child { flex: 1; background-color: #eeeeee; }
html
<!--三栏布局,两边固定宽中间自适应 star--><h3>三栏布局,两边固定宽中间自适应 </h3><div class="has-flex father-six"> <div class="fa-six-child one-child">第一个</div> <div class="fa-six-child two-child">第二个</div> <div class="fa-six-child three-child">第三个</div></div><!--三栏布局,两边固定宽中间自适应 end-->
对于Flex 布局更详细的讲解请移步：Flex 布局教程：语法篇
相关css面试题：两边宽度已知，如何让中间自适应
作者：爱喝酸奶的吃货出处：http://www.cnblogs.com/yingzi1028/本博客文章大多为原创，转载请请在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。