flex布局详解
1. Flex布局是什么?Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。任何一个容器都可以指定为Flex布局。注意：设为Flex布局后,子元素的float、clear和vertical-al
1. Flex布局是什么?
Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。
布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。
任何一个容器都可以指定为Flex布局。
注意：设为Flex布局后,子元素的float、clear和vertical-align属性将失效。
2. 基本概念
容器：采用Flex布局的元素，称为Flex容器（flex container），简称”容器”;
项目：“容器”的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。
容器默认存在两根轴：水平的主轴（main axis 从左至右）和垂直的交叉轴（cross axis 从上至下）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
如下图:
3. 容器的常用属性(父元素)
容器相当于父元素，即用在父元素上的属性，有下面6个：
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
3.1 flex-direction
flex-direction：设置主轴的方向。
它可能有4个值：
- row: （默认值）主轴为水平方向，起点在左端，从左至右排列；
- row-reverse：主轴为水平方向，起点在右端，从右至左排列；
- column：主轴为垂直方向，起点在上沿，从上至下排列；
- column-reverse：主轴为垂直方向，起点在下沿，从下至上排列。
代码演示：
这里提一下，如果要给使用flex，需要给父元素加上display: flex。
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
<style>
.box {
display: flex;
width: 600px;
height: 200px;
background: skyblue;
}
.box div {
width: 100px;
height: 100px;
margin: 0 10px;
background: purple;
color: #fff;
}
</style>
各位在看下列结果的时候注意看元素内容为1的位置。
row：
row-reverse：
column：
column-reverse：
3.2 flex-wrap
flex-wrap： 控制项目(子元素)是否换行。
它可能取三个值：
- nowrap：（默认值）不换行；
- wrap：换行，第一行在上方；
- wrap-reverse：换行，第一行在下方。
默认情况下是不换行的，如果父元素装不下会缩小所有子元素的宽度，使子元素挤在一起。
看如下例子：
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
</body>
<style>
.box {
display: flex;
width: 600px;
height: 200px;
background: skyblue;
}
.box div {
width: 100px;
height: 100px;
background: purple;
color: #fff;
}
</style>
nowrap：
wrap：
wrap-reverse：
3.3 flex-flow
flex-flow：是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap（这里不再演示）。
3.4 justify-content
justify-content：设置主轴上的子元素对齐方式。
它可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右：
- flex-start：（默认值），左对齐（沿着主轴开始位置至末尾位置对齐）；
- flex-end：右对齐（沿着主轴末尾位置至开始位置对齐）；
- center：居中对齐；
- space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍；
- space-between: 两端对齐，项目之间的间隔都相等。
下面逐个演示(主轴为水平方向)：
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
<style>
.box {
display: flex;
width: 600px;
height: 200px;
background: skyblue;
}
.box div {
width: 100px;
height: 100px;
margin: 0 10px;
background: purple;
color: #fff;
}
</style>
flex-start:
flex-end：
center：
space-around：
space-between：
这里其实是两端对齐的，因为小shy给每个子元素设置了margin值。
3.5 align-items
align-items：定义项目在交叉轴上如何对齐。
注意：align-items适用于项目在一行中，不适用于换行。
它可能取5个值，具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下：
- flex-start：交叉轴的起点对齐；
- flex-end：交叉轴的终点对齐；
- center：交叉轴的中点对齐(可以理解为垂直居中)；
- baseline：项目的第一行文字的基线对齐；
- stretch：(默认值)，如果项目未设置高度或设为auto，将占满整个容器的高度。
演示如下：
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
<style>
.box {
display: flex;
width: 600px;
height: 200px;
background: skyblue;
}
.box div {
width: 100px;
height: 100px;
margin: 0 10px;
background: purple;
color: #fff;
}
</style>
flex-start：
flex-end:
center:
baseline:
这个值并不怎么常用，这里小shy拿菜鸟的演示图让大家看得更清楚些：
stretch：
注意: 如果设置为这个值并且想看到效果，需要去掉子元素的高度，下面小shy将效果展示出来：
3.6 align-content
align-content：小shy在3.5提到过align-items适用于子元素在单行中使用，这个align-content则就是为了子元素多行的时候设置交叉轴的子元素的排列方式。
该属性可能取6个值：
- flex-start：与交叉轴的起点对齐；
- flex-end：与交叉轴的终点对齐；
- center：与交叉轴的中点对齐；
- space-around：根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍；
- space-between：与交叉轴两端对齐，轴线之间的间隔平均分布；
- stretch：(默认值)，占满整个交叉轴。
演示如下：
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
</body>
<style>
.box {
display: flex;
flex-wrap: wrap;
width: 600px;
height: 400px;
background: skyblue;
}
.box div {
width: 100px;
height: 100px;
background: purple;
color: #fff;
}
</style>
flex-start:
flex-end:
center:
space-around:
space-between:
stretch:
4. 项目的属性(子元素)
有下面6个(都是给子元素加的属性)：
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
4.1 order属性
order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
<style>
.box {
display: flex;
width: 600px;
height: 200px;
background: skyblue;
}
.box div {
width: 100px;
height: 100px;
margin: 0 10px;
background: purple;
color: #fff;
}
.box div:nth-child(2) {
order: -1;
}
</style>
效果如下：
4.2 flex-grow属性（不常用）
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
.box div { flex-grow: 1 }: 值都为1，则它们将等分剩余空间：
如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍：
4.3 flex-shrink属性（不常用）
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-shrink: 1
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小，负值对该属性无效。
4.4 flex-basis属性（不常用）
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间
flex-basis: auto | 350px;
4.5 flex (很重要 常用)
flex属性是flex-grow, flex-shrink 和 flex-basis的合写，默认值为0 1 auto。后两个属性可选。
flex: none | flex-grow flex-shrink flex-basis；
该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
一般在开发中：
如果所有的子元素设置flex: 1，则子元素均分主轴剩余空间
如果一个项目的flex属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍：
子元素占多少份，flex设置对应的值即可。
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
<style>
.box {
display: flex;
width: 600px;
height: 200px;
background: skyblue;
}
.box div {
width: 100px;
height: 100px;
background: purple;
color: #fff;
}
</style>
给每个子元素设置：flex: 1；子元素会均分主轴的剩余空间。
4.6 align-self属性(单独给自己设置对齐方式)
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
align-self: auto | flex-start | flex-end | center | baseline | stretch;
该属性可能取6个值，除了auto，其他都与align-items属性完全一致。
以上就是小shy对flex布局的全部讲解，图片稍微有点多，导致篇幅过长，主要还是想给大家一个效果图看一下，影响深刻一点，希望大家能够掌握，感谢大家的观看。
权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区
更多推荐
27
0- 0
已为社区贡献1条内容
所有评论(0)