目录
伸缩布局或者弹性布局【响应式布局】
1 设置父元素为伸缩盒子
2 设置伸缩盒子主轴方向
3 设置元素在主轴的对齐方式
4 设置元素在侧轴的对齐方式
5 设置元素是否换行显示
6 设置元素换行后的对齐方式
7 效果测试原码
伸缩布局或者弹性布局【响应式布局】
1 设置父元素为伸缩盒子
☞ 设置父元素为伸缩盒子【直接父元素】
display: flex
为什么在伸缩盒子中,子元素会在一行上显示?
1. 子元素是按照伸缩盒子中主轴方向显示
2. 只有伸缩盒子才有主轴和侧轴
3. 主轴: 默认水平从左向右显示
4。 侧轴: 始终要垂直于主轴样例:一个box父盒子直接包含四个子盒子,且子盒子可能会超出父盒子(如图1),当设置父盒子为伸缩盒子display: flex后,四个盒子会在一行上显示,且不会超出父盒子(如图2)
2 设置伸缩盒子主轴方向
☞ 设置伸缩盒子主轴方向(flex-direction)
1、子项在容器中水平排列,从左到右(在默认的文档流中)。主轴是水平的。
flex-direction: row; 【默认值】(图1)2、子项在容器中水平排列,但方向是从右到左。主轴是水平的,但方向是相反的。
flex-direction: row-reverse; (图2)3、子项在容器中垂直排列,从上到下。主轴是垂直的.
flex-direction: column; (图3)4、子项在容器中垂直排列,但方向是从下到上。主轴是垂直的,但方向是相反的。
flex-direction: column-reverse; (图4)
3 设置元素在主轴的对齐方式
☞ 设置元素在主轴的对齐方式( justify-content)
/* 设置子元素在主轴方向的对齐方式 */1、子项向主轴的起始位置对齐。例如,当
flex-direction
为row
时,子项会左对齐。
justify-content: flex-start;2、子项向主轴的结束位置对齐。例如,当
flex-direction
为row
时,子项会右对齐。
justify-content: flex-end;3、子项在主轴上居中对齐。无论
flex-direction
是row
还是column
,子项都会在其中心位置。
justify-content: center;4、子项在主轴上均匀分布,首个子项位于主轴的起始位置,最后一个子项位于主轴的结束位置,而剩余的空间等分地分布在其他子项之间。
justify-content: space-between;5、子项在主轴上均匀分布,每个子项两侧的空白空间相等。这意味着子项之间的间隔和子项与容器边缘的间隔都是相等的。但是,请注意,子项之间的间隔实际上是两侧间隔的一半,因为两侧的间隔分布在子项两侧的空白区域中
justify-content: space-around;
4 设置元素在侧轴的对齐方式
☞ 设置元素在侧轴的对齐方式 (align-items)
1、子项在交叉轴的起始位置对齐。例如,当
flex-direction
为row
时,子项会向容器的顶部对齐(如果容器的height
足够大以显示多个行)
align-items: flex-start;2、子项在交叉轴的结束位置对齐。例如,当
flex-direction
为row
时,子项会向容器的底部对齐(如果容器的height
足够大以显示多个行)。
align-items: flex-end;3、子项在交叉轴上居中对齐。无论
flex-direction
是row
还是column
,子项都会在其交叉轴的中心位置。
align-items: center;4、如果子项未设置高度或设为
auto
,并且容器在交叉轴上有额外的空间,子项将占据容器的整个高度(或宽度,如果flex-direction
是column
)。如果子项本身有高度设置,则忽略这个值,子项将保持其原有的高度。
align-items: stretch;/* 默认值 */ 拉伸
5 设置元素是否换行显示
☞ 设置元素是否换行显示(flex-wrap)
1. 在伸缩盒子中所有的元素默认都会在一行上显示(跟不换行的效果一致)
2. 如果希望换行:
flex-wrap: wrap | nowrap;
6 设置元素换行后的对齐方式
☞ 设置元素换行后的对齐方式( align-content)
1、所有行都向交叉轴的起始位置对齐
align-content: flex-start;2、所有行都向交叉轴的结束位置对齐
align-content: flex-end;3、所有行在交叉轴上居中对齐
align-content: center;4、行在交叉轴上均匀分布,每行两侧的空白空间相等。但是,请注意,行之间的间隔和行与容器边缘的间隔并不完全相等,因为两侧的间隔分布在行两侧的空白区域中
align-content: space-around;5、行在交叉轴上均匀分布,第一行位于交叉轴的起始位置,最后一行位于交叉轴的结束位置,而剩余的空间等分地分布在其他行之间
align-content: space-between;6、如果容器在交叉轴上有额外的空间,并且行没有指定大小或设为
auto
,那么行将沿着交叉轴方向扩展以填充容器。但是,如果行本身设置了大小(如height
或width
),那么stretch
值将被忽略,行将保持其原有的大小。
align-content: stretch; /* 换行后的默认值 */
样式6效果align-content: stretch;每个子盒子设置了宽高;将每个子盒子的高注释,效果2
7 效果测试原码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .box { width: 400px; height: 400px; border: 1px solid red; /* 设置父元素为伸缩盒子 */ display: flex; /* 设置子元素在主轴方向的对齐方式 */ /* justify-content: flex-start; */ /* justify-content: flex-end; */ /* justify-content: center; */ /* justify-content: space-between; */ /* justify-content: space-around; */ /* 设置主轴方向 */ flex-direction: row; /* flex-direction: row-reverse; */ /* flex-direction: column; */ /* flex-direction: column-reverse; */ /* 设置侧轴对齐方式 */ /* align-items: flex-start; */ /* align-items: flex-end; */ /* align-items: center; */ /* 默认值 */ align-items: stretch; flex-wrap: wrap; /* 设置换行后的对齐方式 */ /* align-content: flex-start; */ /* align-content: flex-end; */ /* align-content: center; */ /* align-content: space-around; */ /* align-content: space-between; */ /* 换行后的默认值 */ align-content: stretch; } .one { width: 100px; height: 100px; background-color: red; margin: 2px; } .two { width: 100px; height: 100px; background-color: pink; margin: 2px; } .three { width: 100px; height: 100px; background-color: yellowgreen; margin: 2px; } </style> </head> <body> <div class="box"> <div class="one"></div> <div class="two"></div> <div class="three"></div> <div class="three"></div> <div class="three"></div> </div> </body> </html>