flex常用布局

公共样式：

            * {            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/本博客文章大多为原创，转载请请在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。