Css的flex(弹性)布局详解
相信Css的弹性盒子大家都不陌生，在平时中也有很多地方会用到它，最近随着学习的慢慢深入，发现css的弹性盒子用的越来越多，而这个词对于我的印象还停留在学习css的时候，当时并没有过多的去了解它，现在才发现，css的弹性盒子是多么的重要，所以这次写下这个博客来恶补
初始css弹性布局
flex布局就是flexble box的缩写，也就是弹性布局
所有元素都可以使用弹性布局(块级，行级)
flex属性大多时候是添加到父级元素上，添加了flex属性的父级元素的弹性子元素呈行排列(跟添加浮动同一行排列一样)
<body>
<div class="total">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
</body>
<style>
.total{
display: flex;
}
.one{
width: 200px;
height: 200px;
background-color: red;
}
.two{
width: 200px;
height: 200px;
background-color: blue;
}
.three{
width: 200px;
height: 200px;
background-color: green;
}
</style>
然后来了解下flex的一些属性
flex-direction
决定主轴的方向，也就是弹性子元素的排列方向
flex-direction:row //主轴是水平方向，起点在左边。也就是从左往右排(默认的是这个)
flex-direction:row-reverse //主轴是水平，起点在右边
flex-direction:column //主轴是垂直方向,起点在上沿
flex-direction:column-reverse //主轴是垂直方向，起点在下沿
flex-wrap
让弹性元素在必要时候进行拆分
flex-wrap: wrap; //自动换行
flex-wrap: nowrap; //不换行，平均挤压
<style>
.total{
width: 400px;
height: 200px;
display: flex;
flex-wrap: wrap;
}
.one{
width: 200px;
height: 200px;
background-color: red;
}
.two{
width: 200px;
height: 200px;
background-color: blue;
}
.three{
width: 200px;
height: 200px;
background-color: green;
}
</style>
当我们给父元素设置宽高后，假如子元素的宽度导致他们不能在同一行排列，添加了flex-wrap的话，元素就会自动换行,如下
而添加的是flex-nowarp的话
扫描二维码关注公众号，回复：
14837904 查看本文章
我们可以发现元素被挤压到同一行去显示
align-content
子元素垂直排列的方式，根据父元素来的
align-content:center //主轴在中间，也就是垂直居中
align-content：flex-start //主轴在父元素的顶部
align-content:flex-end //主轴在父元素的底部
align-content:space-around //上下中均留边距
align-content:between //紧贴上下边距
justify-content
子元素的水平排列方式,与垂直类似
justify-content:center
justify-content：flex-start
justify-content:flex-end
justify-content:space-around
justify-content:between
align-items
与justify-content有点像，但是align-items主要是垂直方向的对齐方式
flex-start：弹性盒子元素的（Y）轴起始位置的边界紧靠住该行的侧轴起始边界。
flex-end：弹性盒子元素的（Y）轴起始位置的边界紧靠住该行的侧轴结束边界。
center：弹性盒子元素在该行的（Y）轴上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两
弹性盒子的好处
优点显而易见，非常的容易和方便，对一块元素进行操作，很容易达到某个布局效果，
缺点也有，就是兼容性的问题，只支持ie9以上。
总得来说，弹性盒子对于当今而言，用的是越来越多，早日掌握这个对以后的学习有很大的帮助