flex布局，也称为弹性盒子布局，这是一种简单而强大的布局方式，我们通过弹性盒指明控件的分布方式、内容的对齐方式和元素的排布顺序，把不同的组件放置在页面中，内容可以轻易的横向或者是纵向的进行排布。
基本属性
flex依赖父子元素，在元素上声明display:flex或者display：inline-flex便可以激活弹性和子布局，而这个元素称之为弹性容器，弹性容器下面的子元素就是弹性盒子布局元素。但是这两种方式还是有点区别的，display:flex;布局的方式创造一个块级盒子容器，而display:inline-flex;创建了一个行内块级元素容器，就像块级元素和行内块级元素的区别。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex布局</title>
<script type="text/javascript" src="../jquery/jquery.min.js"></script>
<style type="text/css">
*{
margin:0;
padding: 0;
}
#one{
border: 1px solid red;
display: flex;
height: 200px;
}
#one div{
margin-left:30px;
background: blue
}
#two{
border: 1px solid green;
display: inline-flex;
height: 200px;
margin-top: 50px
}
#two div{
margin-left:30px;
background: yellow;
}
</style>
</head>
<body>
<div id="one">
<div>我们都是一家人</div>
<div>我们都是一家人</div>
</div>
<div id="two">
<div>我们都是一家人</div>
<div>我们都是一个家庭</div>
</div>
</body>
</html>效果如下：
1、flex-direction属性
flex-direction:row(默认) | row-reverse | column | column-reverse
这几个属性分别代表容器内元素的排布方向:横向从左到右、横向从右到左、纵向从上到下、纵向从下到上；
示例如图：
flex-direction:row（默认）;（默认为水平从左到右方向排布）
flex-direction:row-reverse;（从右向左排布）
flex-direction:column;（从上到下排布）
flex-direction:column-reverse;（从下到上排布）
2、换行flex-wrap属性和元素宽度是否根据父元素自行缩减
flex-wrap:nowrap(默认) | wrap | wrap-reverse;父元素
flex-shrink:0 | 1(默认缩减);子元素
换行这个属性在元素超出容器内部空间的时候就会有作用，默认显示在一行，不换行,如果容器内部元素超出容器空间大小就会被隐藏，这时候就应该设置换行属性。
flex-wrap:nowrap; flex-shrink:1;（子元素不换行，并且随着父元素自动缩减子元素内容宽度）
flex-wrap:nowrap; flex-shrink:0;（子元素不换行，但是不跟随父元素进行元素内容宽度缩减，这样就会导致子元素超出容器）
flex-wrap:wrap; flex-shrink:0;（子元素换行，但是不随父元素宽度进行内容缩减）
flex-wrap:wrap-reverse; flex-shrink:0;
3、flex-flow属性
flex-flow是flex-direction和flex-wrap的缩写属性
如：flex-flow:row wrap;flex-shrink:0;
4、justify-content属性
justify-content属性指明在弹性容器的主轴上如何分布各行里面的弹性元素，说白点也就是进行元素排布位置。
justify-content:flex-start(默认值排布在主轴起边) | flex-end | center | space-between | space-around | space-evenly
justify-content:flex-start;（以横向排列为例，排列在主轴起边）
justify-content:flex-end;（排列方向为主轴终边）
justify-content:center;（排列为在主轴中点两侧排布）
justify-content:space-between;（排布为每一行第一个元素放在起边，每行最后一个元素放在终边，然后把相邻的元素之间的空白调整平均，也就是始末靠边元素之间间隔分布）
justify-content:space-around;（这样的分布是设置每个元素两边的空白部分平均，都相当于有两侧外边距且边距相同，但是相邻两个元素之间的距离随即扩大）
justify-content:space-evenly;（这样分布是使得每个元素周围的空白空间都是一样的大小，等均分布）
5、align-items属性
align-items属性是在垂轴的方向上进行弹性元素的排布
align-items:flex-start | flex-end | center | baseline | stretch(默认)
align-items:flex-start;（垂轴初始边对齐）
align-items:flex-end;（垂轴终边对齐）
align-items:center;（垂轴中心线对齐）
align-item: baseline;（中心线--基线对齐）
这个属性基线对齐是指的是当弹性元素内容不同的时候，会以弹性元素第一行内容的底部基线进行对齐，对齐的标准就是内容离弹性容器最远的为基准。
6、align-content属性
align-content属性值得是垂轴方向上的空间和弹性元素的位置分配，一般适用于多行显示的弹性容器
align-content:stretch(默认) | flex-start | flex-end | center | space-between | space-around | space-evenly
align-content:stretch
align-content:flex-start;
align-content:flex-end;
align-content:center;
align-content:space-between;
align-content:space-around;
align-content:space-enevly;
以上都是对弹性容器的操作，下面这个属性是对弹性容器中弹性元素的操作
7、align-self属性
align-self属性是单独对容器中的弹性元素进行设置垂直轴对齐方式。也就是单独为弹性元素设置align-items属性
align-self:auto(默认值) | flex-start | flex-end | center | baseline | stretch
align-self:auto（默认值auto：弹性元素继承父元素的align-items属性）
当我们对第二个弹性元素进行设置该属性的时候，如下：默认继承父元素的align-items:stretch;属性
align-self:flex-start;
align-self:flex-end;
align-self:center;
align-self:baseline;(元素位于容器的基线上。如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐)
align-self:stretch;
8、flex-grow属性
flex-grow:number | 0(默认值)
flex-grow属性定义有多余的空间时是否允许弹性元素增大，以及允许这部分大且有多余的空间是。相对其他同辈的弹性元素一什么比例增大。
举个例子说明：有一个宽度750px的弹性容器，里面有三个弹性元素，且都设置宽度100px；因此剩余的空间为450px，所以flex-grow属性就是决定如何分配这450px空间的。
正常情况下：默认每一个弹性元素的flex-grow:0;所以空白部分不会分配
1）设置弹性容器中第二个弹性元素flex-grow:1;其他的不设置，这时第二个div宽度=100px+450px*1=550px;
2)设置弹性容器中第一个和第二个元素的flex-grow值为1和2，此时第一个div的宽度=100px+450px*(1/3)=250px;第二个div的宽度=100px+450px*(2/3)=400px;这时弹性容器内剩余的空间就会按比例分配，多个的时候也是一样，根据设置的flex-grow的值得和进行比例分配。
9、flex-shrink属性
flex-shrink属性是当前弹性容器不允许弹性元素自动换行的情况下，且弹性元素超出弹性容器空间，这时候就要通过缩减因子使得容器可以装下所有的元素
flex-shrink:1(默认值，默认为缩减) 0(不缩减) 其他值number（缩减比例）;
flex-shrink:0;(弹性元素不缩减)
flex-shrink：1；(默认缩减比例为1:1:1)
flex-shrink：number（其他值）（缩减比例为1:1:3）这时设置宽度为wid=300px；超出容器的宽度，这是候应该把超出的部分按照1:1:3比例在每一个容器元素上缩减。
这样三个容器的宽度一次是：270px 270px 210px；
以上就是常用的flex盒子布局属性，有什么缺少的，希望可以多多提出意见。
4430
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
