设置为伸缩盒子
display: flex;
当在元素的样式中添加如上属性时，则表明元素为伸缩盒子。
当设置某个元素为伸缩盒子后，其直接子元素将会在一行上显示(未设置为伸缩盒子时，其直接子元素需设置为 float:left; 才能在一行上显示)。
Document.box {
width: 500px;
height: 500px;
border: 1px solid #AB1212;
display: flex;
}
.one {
width: 150px;
height: 150px;
background-color: #000000;
}
.two {
width: 150px;
height: 150px;
background-color: #EDEDED;
}
.three {
width: 150px;
height: 150px;
background-color: #EE3030;
}
为什么在伸缩盒子中，直接子元素会在一行上显示？
1)子元素是按照伸缩盒子中的主轴方向显示的。当伸缩盒子中同一行上的所有子元素的宽度超过伸缩盒子宽度时，子元素的宽度将被自适应。
2)只有伸缩盒子才有主轴和侧轴。主轴：默认水平从左向右显示。侧轴：始终垂直于主轴。
设置伸缩比
问：某一个元素宽度为 577px，此元素中有 N 个直接子元素，如何将这 N 个子元素设置成同等宽度？
答：首先将元素设置为伸缩盒子，然后设置其直接子元素的伸缩比即可。
flex: n;
flex 样式属性用于设置元素的伸缩比。n 的取值为正整数，表示占整个份数中的多少份。整个份数 = 元素的每个直接子元素的 flex 属性值之和。
示例1：将元素分为三等分，其每个直接子元素占其中 1 分，即三分之一
Document.box {
width: 577px;
height: 100px;
border: 1px solid #AB1212;
display: flex;
}
.one {
flex: 1;
background-color: #000000;
}
.two {
flex: 1;
background-color: #EDEDED;
}
.three {
flex: 1;
background-color: #EE3030;
}
运行结果：
示例2：将元素分为四等分。其直接子元素 class="one" 和 class="three"占其中 1 分，即四分之一；其直接子元素 class="two" 占其中 2 分，即四分之二；
Document.box {
width: 577px;
height: 100px;
border: 1px solid #AB1212;
display: flex;
}
.one {
flex: 1;
background-color: #000000;
}
.two {
flex: 2;
background-color: #EDEDED;
}
.three {
flex: 1;
background-color: #EE3030;
}
运行结果：
设置伸缩盒子中子元素在主轴方向的对齐方式
justify-content: flex-start|flex-end|center|space-between|space-around;
flex-start：默认值。主轴的开头对齐。
flex-end：主轴的结尾对齐。
center：主轴的中心对齐。
space-between：主轴两端对齐，中间自适应空白空间。
space-around：每个子元素主轴两边留有相同宽度的空白空间。
设置伸缩盒子主轴的方向
flex-direction: row|row-reverse|column|column-reverse;
row：默认值。主轴方向为从左到右。
row-reverse：主轴方向为从右到左。
column：主轴方向为从上到下。
column-reverse：主轴方向为从下到上。
设置伸缩盒子中子元素在侧轴方向的对齐方式
align-items: stretch|center|flex-start|flex-end|baseline;
stretch：默认值。如果子元素未设置高度，则会被沿侧轴方向拉伸。
center：子元素在侧轴中间。
flex-start：侧轴为从上到下显示时，子元素位于侧轴上方。
-flex-end ：侧轴为从上到下显示时，子元素位于侧轴下方。
设置伸缩盒子中的直接子元素换行显示
flex-wrap: wrap|no-wrap|wrap-reverse;
no-wrap：默认值。不换行显示。
当伸缩盒子中同一行上的所有子元素的宽度超过伸缩盒子宽度时，子元素的宽度将根据伸缩盒子宽度自适应。
Document.box {
width: 500px;
height: 500px;
border: 1px solid #AB1212;
display: flex;
}
.one {
width: 250px;
height: 250px;
background-color: #000000;
}
.two {
width: 250px;
height: 250px;
background-color: #EDEDED;
}
.three {
width: 250px;
height: 250px;
background-color: #EE3030;
}
wrap：换行显示。
Document.box {
width: 500px;
height: 500px;
border: 1px solid #AB1212;
display: flex;
flex-wrap: wrap;
}
.one {
width: 250px;
height: 250px;
background-color: #000000;
}
.two {
width: 250px;
height: 250px;
background-color: #EDEDED;
}
.three {
width: 250px;
height: 250px;
background-color: #EE3030;
}
wrap-reverse：以与 wrap 相反的方向换行显示。
Document.box {
width: 500px;
height: 500px;
border: 1px solid #AB1212;
display: flex;
flex-wrap: wrap-reverse;
}
.one {
width: 250px;
height: 250px;
background-color: #000000;
}
.two {
width: 250px;
height: 250px;
background-color: #EDEDED;
}
.three {
width: 250px;
height: 250px;
background-color: #EE3030;
}
设置伸缩盒子中换行显示子元素在侧轴方向的对齐方式
align-content: stretch|center|flex-start|flex-end|space-between|space-around;
stretch：默认值。
Document.box {
width: 400px;
height: 400px;
border: 1px solid #AB1212;
display: flex;
flex-wrap: wrap;
align-content: stretch
}
.one {
width: 150px;
height: 150px;
background-color: #000000;
}
.two {
width: 150px;
height: 150px;
background-color: #EDEDED;
}
.three {
width: 150px;
height: 150px;
background-color: #EE3030;
}
center
Document.box {
width: 400px;
height: 400px;
border: 1px solid #AB1212;
display: flex;
flex-wrap: wrap;
align-content: center;
}
.one {
width: 150px;
height: 150px;
background-color: #000000;
}
.two {
width: 150px;
height: 150px;
background-color: #EDEDED;
}
.three {
width: 150px;
height: 150px;
background-color: #EE3030;
}
flex-start
Document.box {
width: 400px;
height: 400px;
border: 1px solid #AB1212;
display: flex;
flex-wrap: wrap;
align-content: flex-start;
}
.one {
width: 150px;
height: 150px;
background-color: #000000;
}
.two {
width: 150px;
height: 150px;
background-color: #EDEDED;
}
.three {
width: 150px;
height: 150px;
background-color: #EE3030;
}
-flex-end ：侧轴为从上到下显示时，子元素位于侧轴下方。
Document.box {
width: 400px;
height: 400px;
border: 1px solid #AB1212;
display: flex;
flex-wrap: wrap;
align-content: flex-end;
}
.one {
width: 150px;
height: 150px;
background-color: #000000;
}
.two {
width: 150px;
height: 150px;
background-color: #EDEDED;
}
.three {
width: 150px;
height: 150px;
background-color: #EE3030;
}
space-between
Document.box {
width: 400px;
height: 400px;
border: 1px solid #AB1212;
display: flex;
flex-wrap: wrap;
align-content: space-between;
}
.one {
width: 150px;
height: 150px;
background-color: #000000;
}
.two {
width: 150px;
height: 150px;
background-color: #EDEDED;
}
.three {
width: 150px;
height: 150px;
background-color: #EE3030;
}
space-around
Document.box {
width: 400px;
height: 400px;
border: 1px solid #AB1212;
display: flex;
flex-wrap: wrap;
align-content: space-around;
}
.one {
width: 150px;
height: 150px;
background-color: #000000;
}
.two {
width: 150px;
height: 150px;
background-color: #EDEDED;
}
.three {
width: 150px;
height: 150px;
background-color: #EE3030;
}
82
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
