一、什么是弹性盒
-
弹性盒子是
CSS3的一种新的布局模式，在移动端布局中应用广泛。 -
CSS3弹性盒（Flexible Box或flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 -
引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
二、flex布局
-
flex容器：采用flex布局的元素的父元素； -
flex项目：采用flex布局的元素的父元素的子元素； -
容器默认存在两根轴：水平的主轴(
main axis)和垂直的交叉轴(cross axis)，主轴的开始位置叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。项目默认沿主轴排列。 -
作用：控制它的所有儿子辈子元素。(注意只对儿子辈子元素生效)
-
特点：
- 1、弹性盒子里面的儿子辈子元素都可以添加大小
- 2、如果想让弹性盒子里的一个子元素左右上下居中，只需要给子元素添加
margin:auto; - 3、弹性盒里的子元素都是沿着"主轴"排列的。“主轴”：可以为x轴也可以是y轴，当x为主轴时，y就为侧轴(默认x为主轴)
- 4、设为
flex布局以后，子元素的float、clear和vertical-align属性将失效。
三、触发弹性盒
- 给父元素添加
display:flex / inline-flex;flex：独占一行的弹性盒inline-flex：行内弹性盒
四、弹性盒容器属性
【注】弹性盒容器属性都是给父元素添加的。
1、改变主轴的方向：flex-direction
row：x轴为主轴(默认值)row-reverse：以x轴为主轴，反向排列，以末端为起始点column：y轴为主轴column-reverse：以y轴为主轴，反向排列，以末端为起始点
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<style>
section {
width: 600px;
height: 600px;
background: pink;
margin: 100px auto;
/* 触发弹性盒：给父元素添加 */
display: flex;
/* 控制主轴的方向为y轴 */
flex-direction: column;
}
span {
width: 100px;
height: 100px;
line-height: 100px;
color: #fff;
background: skyblue;
border-radius: 100%;
text-align: center;
}
</style>
</head>
<body>
<section>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
</section>
</body>
</html>
↑↑↑左图为默认主轴x轴，右图为更改了主轴方向为y轴。
2、改变主轴的对齐方式：justify-content
flex-start：在起始点对齐(默认)flex-end：在末端对齐center：居中space-between：两端对齐space-around：自动分配间距（等于给子元素两端加了margin）
section {
width: 600px;
height: 600px;
background: pink;
margin: 100px auto;
/* 触发弹性盒 */
display: flex;
/* 控制主轴的对齐方式 */
justify-content: flex-start;
}
↑↑↑主轴对齐方式(此例主轴默认为x轴）
3、改变侧轴的对齐方式：align-items
flex-start：侧轴开始的位置对齐flex-end：侧轴结束的位置对齐center：侧轴居中的位置baseline：基线对齐（同flex-start）stretch：默认值。在子元素未设置宽(y轴)或高(x轴)的情况下，是拉伸状态
section {
width: 600px;
height: 600px;
background: pink;
margin: 100px auto;
/* 触发弹性盒 */
display: flex;
/* 控制主轴的对齐方式 */
justify-content: space-around;
/* 控制侧轴的对齐方式 */
align-items: center;
}
↑↑↑侧轴对齐方式(此例主轴默认为x轴）
section {
width: 400px;
height: 200px;
background: pink;
margin: 100px auto;
/* 触发弹性盒 */
display: flex;
/* 控制主轴的对齐方式 */
justify-content: space-around;
/* 控制侧轴的对齐方式 */
align-items: stretch;
}
span {
width: 50px;
/* 不设高 */
/* height: 50px; */
line-height: 50px;
color: #fff;
background: skyblue;
border-radius: 100%;
text-align: center;
}
↑↑↑侧轴对齐方式为stretch时，不设高，为拉伸状态(此例主轴默认为x轴）
4、控制子元素是否换行：flex-wrap
- 默认情况：弹性盒不会让子元素换行
- 1、当子元素没有内容只有宽高时，添加
n个子元素都不会溢出，而是重新计算宽高 - 2、当子元素有内容且内容超出父元素时，子元素溢出
- 1、当子元素没有内容只有宽高时，添加
nowrap：不换行wrap：换行wrap-reverse：反向换行（从主轴开始的地方排列反向）
section {
width: 400px;
height: 200px;
background: pink;
margin: 100px auto;
/* 触发弹性盒 */
display: flex;
/* 控制换行 */
flex-wrap: wrap;
}
span {
width: 100px;
height: 100px;
line-height: 50px;
color: #fff;
background: skyblue;
border-radius: 100%;
text-align: center;
}
<body>
<section>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</section>
</body>
↑↑↑左图未换行，子元素变形；右图设置了换行
5、控制行与行之间的对齐方式：align-content
flex-start：默认状态：行与行之间不存在默认的行间距flex-end：在末端对齐center：居中space-between：两端对齐space-around：自动分配间距（等于给子元素两端加了margin）
section {
width: 400px;
height: 400px;
background: pink;
margin: 100px auto;
/* 触发弹性盒 */
display: flex;
/* 控制主轴的对齐方式 */
justify-content: space-around;
/* 控制换行 */
flex-wrap: wrap;
/* 控制行与行的对齐方式 */
align-content: flex-start;
}
span {
width: 100px;
height: 100px;
line-height: 50px;
color: #fff;
background: skyblue;
border-radius: 100%;
text-align: center;
}
五、弹性盒项目属性
【注】弹性盒项目属性都是给子元素添加的。
1、控制子元素的侧轴对齐方式：align-self
auto：默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为stretchstretch：元素被拉伸以适应容器。center：元素位于容器的中心。flex-start：元素位于容器的开头。flex-end：元素位于容器的结尾。
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<style>
section {
width: 600px;
height: 400px;
background: pink;
margin: 100px auto;
/* 触发弹性盒 */
display: flex;
}
div {
width: 100px;
height: 100px;
}
div:nth-child(1) {
background: skyblue;
/* 控制自身侧轴对齐 */
align-self: flex-start;
}
div:nth-child(2) {
background: purple;
align-self: flex-end;
}
div:nth-child(3) {
background: orangered;
align-self: center;
}
</style>
</head>
<body>
<section>
<div>1</div>
<div>2</div>
<div>3</div>
</section>
</body>
</html>
2、控制子元素的排序：order
order:number;排序优先级，数字越大越往后排，默认为0，支持负数。
<style>
section {
width: 600px;
height: 400px;
background: pink;
margin: 100px auto;
/* 触发弹性盒 */
display: flex;
}
div {
width: 100px;
height: 100px;
}
div:nth-child(1) {
background: skyblue;
/* 控制自身侧轴对齐 */
align-self: flex-start;
/* 控制排序 */
order: 2;
}
div:nth-child(2) {
background: purple;
align-self: flex-end;
/* 控制排序 */
order: 1;
}
div:nth-child(3) {
background: orangered;
align-self: center;
/* 设置宽度 */
/* width: 200px; */
}
</style>
↑↑↑数字越大，排在越后面
3、剩余空间的分配
- 简写语法：
flex:1; - 分配主轴剩余空间
- 1、可以给某个子元素加
- 2、也可以给所有子元素加（意味着所有的子元素平均分配）
- 3、假设某个元素设置
flex:2;意为该元素分到了剩余空间的2份
div {
width: 100px;
height: 100px;
}
div:nth-child(1) {
background: skyblue;
/* 控制自身侧轴对齐 */
align-self: flex-start;
/* 分配剩余空间：div1占2份 */
flex: 2;
}
div:nth-child(2) {
background: purple;
align-self: flex-end;
/* 控制排序 */
/* order: 1; */
/* 分配剩余空间：div2占1份 */
flex: 1;
}
div:nth-child(3) {
background: orangered;
align-self: center;
/* 设置宽度 */
/* width: 200px; */
}
↑↑↑div1占剩余空间（600-300）的2份，div2占剩余空间的1份