布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。
2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。
一、Flex布局是什么？
Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为Flex布局。采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。
二、Flex布局的属性与用法
二、1 子元素div的水平垂直居中 justify-content | align-items
<style>
.box{
height:300px;
border: 1px solid #ccc;
display:flex; /*将div设置成弹性盒子*/
flex-direction :row; /*子元素的排列方式 默认从左到右*/
justify-content :center; /* 主轴 居中*/
align-items：center； /* 侧轴 居中*/
}
.no {
width:150px;
height:150px;
background:red;
}
</style>
<-- html 标签-->
<body>
<div class="box">
<div class="no"></div>
</div>
</body>
子元素水平垂直居中对齐
justify-content： 定义子元素在主轴的对齐方式
justify-content：flex-start | flex-end | center | space-around | space-evenly | space-between
分别对应了 从左到右对齐（flex-start）从右到左对齐（flex-end）
居中对齐（center） 空白环绕（space-around）
左右对齐 平分空白区域（ space-between）
align-items:定义子元素在侧轴的对齐方式
二、2 子元素左右对齐 空白平分 space-between
<style type="text/css">
.box{ height: 160px;
display:flex;
justify-content:space-between;
border:1px solid #ccc;}
.no{ background:red;
width: 80px;
height: 80px;}
</style>
<body>
<div class="box">
<div class="no">项目1</div>
<div class="no">项目2</div>
<div class="no">项目3</div>
</div>
</body>
子元素左右对齐 平分空白区域
justify-content 左右对齐后，将空白区域平分，与子元素无太多关系
二、2 子元素左右对齐 空白平分 space-between
<style type="text/css">
.box{ height: 160px;
display:flex;
justify-content:space-around ;
border:1px solid #ccc;}
.no{ background:red;
width: 80px;
height: 80px;}
</style>
<body>
<div class="box">
<div class="no">项目1</div>
<div class="no">项目2</div>
<div class="no">项目3</div>
</div>
</body>
space-around 空白环绕
space-around与上述不同的是 space-between是左右对齐之后将空白平分而 space-around是空白环绕 每个子元素都有一定量的空白
二、3 Flex盒子的主轴与侧轴
flex-direction 指定伸缩容器(Flex盒子)主轴的伸缩流方向
flex-direction： 主轴的方向（即项目的排列方向）。 【box-lines】 flex-flow： flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap justify-content： 项目在主轴上的对齐方式。【box-pack】 align-items： 项目在交叉轴上如何对齐。【box-align】 align-content： 定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
flex-direction: row | row-reverse | column | column-reverse;
row 从左到右排列 row-reverse从右到左排列
column 从上到下排列 column-reverse从下到上排列
二、4 flex-wrap：指定伸缩项目是否沿着侧轴排列
nowrap：不换行，而是通过收缩每一个孩子的宽度来挤在一行。
wrap： 换行
wrap-inverse: 换行，但是折行方向相反
沿侧轴排列
<style type="text/css">
.box{ height: 400px;
display:flex;
justify-content:space-around ;
flex-wrap: wrap;
border:1px solid #ccc;}
.no{ background:red;
width: 100px;
height: 100px;}
</style>
<div class="box">
<div class="no">项目1</div>
<div class="no">项目2</div>
<div class="no">项目3</div>
<div class="no">项目4</div>
</div>
flex-wrap:wrap
二、5 flex的使用
它是 flex-grow, flex-shrink, flex-basis三个属性的快捷方式。默认是 0, 1, auto。 flex 属性会自动计算 flex-basis 属性的值。
如果给每个子元素都加上flex-grow：1；那么子元素将平分覆盖空白区
<style type="text/css">
.box{ height: 400px;
display:flex;
border:1px solid #ccc;}
.no{ background:red;
width: 100px;
height: 100px;
flex:1;
margin: 1px; /*为了看出效果 加上1px的margin*/}
</style>
<body>
<div class="box">
<div class="no">项目1</div>
<div class="no">项目2</div>
<div class="no">项目3</div>
<div class="no">项目4</div>
<div class="no">项目5</div>
</div>
</body>
flex-grow
这时候，如果我给第二个项目定义
flex-grow: 2，那么它的宽度是怎么计算的？
项目的比例会变成1：2：1
比例不同
flex-shrink
如果孩子的总宽度超过了容器宽度（主轴），那么这个属性定义了如何把超过的那部分平分到每个孩子身上，然他们按比例来缩小一定的宽度从而可以在容器中装得下。假设我们现在有一个容器，宽度为200px，有三个孩子宽度为100px，并且每个孩子有margin: 2px，那么三个孩子总宽度(100+2*2)*3 = 312px，超过了 112px。
所以我们从这三个孩子身上砍下112px宽度，以让他们能装进容器中。
flex-basis
在分配空白之前，孩子的宽度，默认是auto，也就是孩子本身的宽度，如果你定义了flex-basis: 200px;，那么它就会覆盖掉孩子的宽度。
网友评论