flexbox，一种CSS3的布局方式，也叫做弹性盒子模型，2009年w3c提出用来为盒装模型提供最大的灵活性。
布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。
比如：在知道对象宽高的情况下，实现div盒子水平垂直居中。对居中元素绝对百分比定位，然后通过margin偏移的方式来实现。
.container{
width: 600px;
height: 400px;
border: 1px solid #000;
position: relative;
}
.box{
width: 200px;
height: 100px;
border: 1px solid #000;
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top:-50px;
}
假如使用了flex后，实现起来就简单了，而且不需要自己去算，也不需要绝对定位，只需要通过对伸缩容器定义两个属性，justify-content定义伸缩项目沿着主轴线的对齐方式为center， align-items定义伸缩项目在侧轴（垂直于主轴）的对齐方式为center，具体如下：
.container{
width: 600px;
height: 400px;
border: 1px solid #000;
display: flex;
justify-content:center;
align-items:center;
}
.box{
width: 200px; //宽度可以为任意
height: 100px; //高度可以为任意
border: 1px solid #000;
}
/*----------------------------------那么，接下来开始介绍Flexbox。---------------------------------*/
简单放一张图
介绍一下：
flexbox由flex容器 + flex项目组成 （容器即父元素，项目即子元素）。
注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
有两条轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
容器六个属性：flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
具体属性的值见上图
优点：简单、方便、快速。
缺点：兼容性
具体大家可以见这个网站：caniuse（http://caniuse.com/#search=flexbox）
/*--------------------------------------------------------结束。-------------------------------------------*/
网友评论