目录
6.align-items和align-content的区别
前言
响应式布局是兼容性较差的一种布局，但是随着时代的发展，手机端的兼容性问题基本不需要去担心，因此对应的一系列兼容性问题可以忽略，响应式布局中的flex布局成为了非常方便的布局手段。因此，我们应该去认真的学习和理解，flex布局的用法和他们的属性，有什么样的用法，可以实现什么样的效果。
一、flex布局原理
flex是如何去实现它的布局的？flex是flexible box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。采用flex布局的元素，称为flex容器(flexcontainer)，简称“容器”。它的所有子元素自动成为容器成员，称为flex项目（flex item），简称“项目”。flex通过控制他的子容器，实现分配内容的效果。
flex的语法是这样使用的：
div { display：flex；}
给父盒子设置display：flex；之后，可以设置一些父盒子的父类属性，然后实现你想看到的排列效果。之后可以给子盒子设置自己的属性，实现分配比例调整的效果。总得来说，通过给父盒子添加flex属性，来控制子盒子的位置和排列方式，实现容器控制盒子的能力。不过需要注意两个问题：
- 当我们为父盒子设为flex布局以后，子元素的float、clear和vertical-align属性将失效。
- 伸缩布局=弹性布局=伸缩盒布局=弹性布局=flex布局
二、 父类的常用属性
- flex-direction：设置主轴的方向
- justify-content：设置主轴上的子元素排列方式
- flex-wrap：设置子元素是否换行
- align-content：设置侧轴上的子元素的排列方式（多行）
- align-items：设置侧轴上的子元素排列方式（单行）
- flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap
1.flex-direction
在flex布局中，是分为主轴和侧轴两个方向，同样的叫法有：行和列、x轴和y轴
- 默认主轴方向就是x轴方向，水平向右
- 默认侧轴方向就是y轴方向，水平向下
flex-direction属性决定主轴的方向（即项目的排列方向），语法就是flex-direction：row；。
注意：主轴和侧轴是会变化的，就看flex-direction设置谁为主轴，剩下的就是侧轴。而我们的子元素是跟着主轴来排列的：
- row：默认值从左到右
- row-reverse：从右到左
- column：从上到下
- column-reverse：从下到上
2.justify-content
justify-content属性定义了项目在主轴上的对齐方式，使用这个属性之前一定要确定好主轴是哪一个，这样使用的时候才会看出对应的效果。下面的是他的属性值：
- flex-start：默认值从头部开始，如果主轴是下周，则从左到右
- flex-end：从尾部开始排列
- center：在主轴居中对齐（如果主轴是x轴则水平居中）
- space-around：平分剩余空间
- space-between：先两边贴边，再平分剩余空间（重要）
3. flex-wrap
默认情况下，项目都排在一条线（又称“轴线”）上。flex-wrap属性定义，flex布局中默认是不换行的。
- nowrap：默认值，不换行。
- wrap：换行。
4.align-items
该属性是控制子项在侧轴（默认是y轴）上的排列方式，在子项为单项（单行）的时候使用
- flex-start：默认值，从上到下。
- flex-end：从下到上
- center：挤在一起居中（垂直居中）
- stretch：拉伸
5.align-content
设置子项在侧轴上的排列方式，并且只能用于子项出现多行的情况（多行），在单行下是没有效果的。
- flex-start：默认值在侧轴的头部开始排列
- flex-end：在侧轴的尾部开始排列
- center：在侧轴中间显示
- space-around：子项在侧轴平分剩余空间
- space-between：子项在侧轴先分布在两头，再平分剩余空间
- stretch：设置子项元素高度平分父元素高度
6.align-items和align-content的区别
- align-items使用于单行情况下，只有上对齐、下对其、居中和拉伸
- align-content适应于换行（多行）的情况下（单行情况下无效），可以设置上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值。
- 总结就是单行找align-items多行找align-content
7. flex-flow
flex-flow属性是flex-direction和flex-wrap属性的复合属性语法为：flex-flow：row wrap；
三、常见子项属性
- flex子项目占的份数
- align-self控制子项目自己在侧轴的排列方式
- order属性定义子项的排列顺序（前后顺序）
1.flex
flex属性定义子项目分配剩余空间，用flex来表示占多少份数。
语法：
.item {
flex: <number>; /* 默认值 0 */
}
flex：1；就是只占有一份。
注意：
可以用于平均分配盒子，制作圣杯布局（左右盒子固定大小， 中间自适应），flex里面可以放百分比。
flex下面还有三个属性，flex是这三个属性的总称：
（1）flex-grow
flex-grow设置了一个flex项主尺寸的flex增长系数。它指定了flex容器中剩余空间的多少应该分配给项目（flex增长系数）。主尺寸是项的宽度或高度，这取决于flex-direction值。
剩余的空间是flex容器的大小减去所有flex项的大小加起来的大小。如果所有的兄弟项目都有相同的flex-grow系数，那么所有的项目将获得相同的剩余空间，否则将根据不同的flex-grow系数定义的比例进行分配。flex-grow 与其他的flex属性flex-shrink和flex-basis一起使用，通常使用flex 速记来定义，以确保所有的值都被设置。flex-grow的优先级大于width。
（2）flex-shrink
flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。
这里附上代码方便理解：
<p>the width of content is 500px, flex-basic of flex item is 120px.</p>
<p>A, B, C are flex-shrink:1. D and E are flex-shrink:2</p>
<p>the width of D is not the same as A's</p>
<div id="content">
<div class="box" style="background-color:red;">A</div>
<div class="box" style="background-color:lightblue;">B</div>
<div class="box" style="background-color:yellow;">C</div>
<div class="box1" style="background-color:brown;">D</div>
<div class="box1" style="background-color:lightgreen;">E</div>
</div>#content {
display: flex;
width: 500px;
}
#content div {
flex-basis: 120px;
border: 3px solid rgba(0,0,0,.2);
}
.box {
flex-shrink: 1;
}
.box1 {
flex-shrink: 2;
}效果如下：
（3）flex-basis
flex-basis 指定了 flex 元素在主轴方向上的初始大小。如果不使用 box-sizing 改变盒模型的话，那么这个属性就决定了 flex 元素的内容盒（content-box）的尺寸。
2.align-self
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。
默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
语法：
span:nth-child(2) {
/* 设置自己在侧轴上的排列方式 */
align-self: flex-end;
}
3. coder
数值越小，排列越靠前，默认为0。
注意：和z-index不一样
语法：
.item {
order: <number>;
}
这里附上代码解释：
<style>
* {
margin: 0;
padding: 0;
}
.box {
margin: 0 auto;
display: flex;
width: 500px;
height: 150px;
border: 2px solid black;
}
.box div {
width: 100px;
height: 100px;
}
.box div:nth-of-type(1) {
background-color: rgb(197, 17, 17);
order: 2;
}
.box div:nth-of-type(2) {
background-color: rgb(10, 199, 73);
order: 1;
}
.box div:nth-of-type(3) {
background-color: rgb(7, 103, 182);
order: 4;
}
.box div:nth-of-type(4) {
background-color: rgb(216, 231, 9);
order: 3;
}
</style>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</body>效果如下：
四、总结
认识了这么多的属性，这里我们来做一些总结性的方法：
- 用flex实现居中对齐
- 利用flex实现圣杯布局
- 平均分配布局
1.实现居中对齐
实现居中对齐的手段，我们知道有定位，内外边距，还有一些我们自己不知道的方法。flex要怎么实现居中对齐呢？就是利用justify-content和align-items两个属性同时居中实现，这里列出代码给同学们参考：
<style>
.box {
display: flex;
width: 400px;
height: 400px;
background-color: rgb(18, 42, 177);
justify-content: center;
align-items: center;
}
.box div {
width: 100px;
height: 100px;
background-color: rgb(0, 106, 245);
}
</style>
<body>
<div class="box">
<div></div>
</div>
</body>效果如下：
2.实现圣杯布局
我们知道圣杯布局实际上需要非常长的代码，使用浮动之后，如果里面的内容需要有100%的长度，但是有需要有盒子在它的左右，这个就需要给左边的盒子添加一个-100%的margin-left值把盒子移动到100%长度盒子的坐标，右边的盒子需要用margin-right空出右边和他一样宽度的大小。
这样实现是比较麻烦的，但是如果我们使用flex，制作就非常简单，左右盒子固定大小之后，只需要给中间的盒子flex：1；就可以实现了，这里放上演示代码：
<style>
.box {
display: flex;
width: 900px;
height: 50px;
}
.box div {
color: #ffffff;
text-align: center;
line-height: 50px;
}
.box div:nth-child(odd) {
width: 100px;
height: 50px;
background-color: aqua;
}
.box div:nth-child(2) {
flex: 1;
background-color: aquamarine;
}
</style>
<body>
<div class="box">
<div>左侧</div>
<div>中间</div>
<div>右侧</div>
</div>
</body>效果如下：
3. 平均分配距离
有时候需要大量的盒子同时布局，而且还需要他们按一定的比例去排列这个时候就需要使用space-around这个属性，可以给大家看看代码的实现：
<style>
* {
padding: 0;
margin: 0;
list-style: none;
}
ul {
display: flex;
width: 500px;
height: 400px;
background-color: #cccccc;
flex-wrap: wrap;
justify-content: space-around;
align-content: space-around;
}
li {
width: 150px;
height: 150px;
background-color: #999999;
}
</style>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>效果如下：
除了这些用法以外，还有很多用法，比如给ul使用了dispaly：flex；让li均匀分配之后，又往ul里的li加了dispaly：flex；之后，又对li里面的多个span控制大小排列，来实现复杂的布局方式，也是一种非常有效率而且观赏性很好的布局方式。总的来说，我们需要记住父类属性的使用，子类属性的使用，多实践去查看不一样的效果，实现不同的效果展示。希望看完的同学可以给我一个一键三连。
215
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
