本文详细介绍了CSS Flex布局，包括设置flex布局后父子元素的变化、容器和项目的属性，以及多个示例，如实现元素的水平垂直居中、平分宽度、换行布局，并详细探讨了flex-grow、flex-shrink和flex-basis的用法和相互关系。通过这些内容，读者可以全面掌握Flex布局的核心概念和实际应用。
文章目录
0.前言
发现了自己在flex布局上的一个知识漏洞:
那就是一直认为存在三条轴,主轴,侧轴和交叉轴,
它们分别是通过justify-content,align-items和align-content来设置对齐方式的
实际上侧轴又叫做交叉轴,与主轴方向垂直,
只有单行内容时,通过align-items设置对齐方式,
若有多行内容,可以通过align-content设置对齐方式
借此梳理一下这方面的内容
1.设置flex布局后的父子元素
父元素设置display:flex,被称为Flex容器（flex container），简称”容器”;
此时子元素会默认横向排列.自动成为容器成员,称为Flex项目（flex item），简称”项目”(也被称为灵活元素)。
2.容器(父元素)的属性
- 设置主轴方向:
flex-direction:row(默认)|row-reverse|column|column-reverse - 设置灵活元素(子元素)是否换行:
flex-wrap:nowrap(默认)|wrap|wrap-reverse - 主轴对齐方式:
justify-content:flex-start|flex-end|center|space-between|space-around|space-evenly - 侧轴(交叉轴)对齐方式[单行]:
align-items:flex-start|flex-end|center|stretch|baseline - 侧轴(交叉轴)对齐方式[多行]:
align-content:flex-start|flex-end|center|space-between|space-around|space-evenly - 设置主轴方向和是否换行可以简写为:
flex-flow:<flex-direction> <flex-flow>
3.项目(子元素)的属性
- 设置单个子元素不一样的对齐方式:
align-self:flex-start|flex-end|center|strech|baseline|auto(跟父元素的align-items值一样) - 定义项目的排列顺序(数值越小排列越靠前):
order:0(默认) - 定义项目的放大比例:
flex-grow:0(默认) -
- 如果所有项目的flex-grow属性都为1，则它们将等分剩余空间
- 定义项目的缩小比例:
flex-shrink:1(默认) -
- 如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小
- 在分配多余空间之前，项目(子元素)占据的主轴空间:
flex-basis:auto(默认) -
- 可以设置为与宽或高一样的值,使项目占据固定空间
- flex-grow, flex-shrink 和 flex-basis的简写的符合属性:
flex:0 1 auto(默认这三个值) -
- 每个项目设置flex:1会使它们等分容器宽度(或高度)
4.示例一:flex布局实现flex容器中子元素的水平垂直居中
<style>
/* 我是弹性盒(flex)容器,简称容器 */
#container {
width: 800px;
height: 350px;
border: 1px solid red;
/* 设置弹性盒 */
display: flex;
/* 设置主轴方向:横轴 */
flex-direction: row;
/* 设置主轴对齐方式:居中对齐 */
justify-content: center;
/* 设置交叉轴对齐方式:居中对齐 */
align-items: center;
}
/* 我是容器中的项目,简称项目,也被称作灵活元素 */
#left, #middle, #right {
width: 200px;
height: 200px;
}
#left {
background: pink;
}
/* 为middle设置单独的交叉轴对齐方式 */
#middle {
background: yellow;
align-self: flex-end;
}
#right {
background: skyblue;
}
</style>
<body>
<div id="container">
<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>
</div>
</body>
5.示例二:flex:1实现子元素平分flex容器宽度
/* 我是弹性盒(flex)容器,简称容器 */
#container {
...
}
/* 我是容器中的项目,简称项目,也被称作灵活元素 */
#left,
#middle,
#right {
width: 200px;
height: 200px;
}
#left {
background: pink;
flex: 1;
}
#middle {
background: yellow;
flex: 1;
}
#right {
background: skyblue;
flex: 1;
}
6.示例三:换行,多行布局
<style>
/* 我是弹性盒(flex)容器,简称容器 */
#container {
width: 800px;
height: 550px;
border: 1px solid red;
/* 设置弹性盒 */
display: flex;
/* 设置主轴方向 */
flex-direction: row;
/* 设置是否换行:是 */
flex-wrap: wrap;
/* 设置主轴对齐方式 */
justify-content: space-evenly;
/* 设置交叉轴对齐方式(多行) */
align-content: space-around;
}
/* 我是容器中的项目,简称项目,也被称作灵活元素 */
#left,
#middle,
#right,
#a,
#b,
#c {
width: 200px;
height: 200px;
}
#left {
background: pink;
}
#middle {
background: yellow;
}
#right {
background: skyblue;
}
#a {
background: purple;
}
#b {
background: green;
}
#c {
background: gold;
}
</style>
<body>
<div id="container">
<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
</div>
</body>
7.示例四:flex-grow,flex-shrink和flex-basis属性的使用
7.1.flex-grow的使用(项目宽度之和<容器宽度时才有效果)
<style>
#container {
width: 800px;
height: 250px;
border: 1px solid red;
display: flex;
}
#left,#middle,#right {
width: 200px;
height: 200px;
}
#left {
background: pink;
flex-grow: 0;
}
#middle {
background: yellow;
flex-grow: 2;
}
#right {
background: skyblue;
flex-grow: 2;
}
</style>
<body>
<div id="container">
<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>
<div id="a"></div>
<div id="b"></div>
</div>
</body>
0 2 2=>200px 300px 300px
剩余宽度=容器宽度-项目总宽度=800-600=200px
这200px要通过扩充所有设置了flow-grow的项目的宽度来实现
项目的加权总宽度=200*(0+2+2)=800px
扩充量=剩余宽度^2/加权总宽度*n,其中n是flex-grow的值
上例中三个灵活元素的扩充量分别是:0px 200*200/800*2=100px 100px
所以最后它们的宽度分别为:0px 300px 300px
(可以发现0 2 2和0 1 1 的效果是一样的,因为它们是按比例分配的)
7.2.flex-shrink的使用(项目宽度之和>容器宽度时才有效果)
<style>
#container {
width: 800px;
height: 250px;
border: 1px solid red;
display: flex;
}
#left,#middle,#right,#a,#b {
width: 200px;
height: 200px;
}
#left {
background: pink;
flex-shrink: 0;
}
#middle {
background: yellow;
flex-shrink: 1;
}
#right {
background: skyblue;
flex-shrink: 1;
}
#a {
background: green;
flex-shrink: 4;
}
#b {
background: gold;
flex-shrink: 4;
}
</style>
<body>
<div id="container">
<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>
<div id="a"></div>
<div id="b"></div>
</div>
</body>
分析:
0 1 1 4 4=>200px 180px 180px 120px 120px[120px=200-(200/2000*200*4)]
容器项目总宽度超出容器设置的宽度:溢出宽度=200*5-800=200px
这超出的200px要靠所有设置了flex-shrink的项目按比例缩短来达成
项目的加权总宽度=200*(1+1+4+4)=2000px
即溢出量=溢出宽度^2/加权总宽度*n,其中,n是flex-shrink的值
在上例中五个灵活元素的溢出量分别是:0px 20px 20px 80px 80px
所以最后它们的宽度分别为:200px 180px 180px 120px 120px
7.3.flex-basis与width和min-width,max-width的区别
#left {
background: pink;
flex-basis: 300px;
min-width: 400px;
}
#middle {
background: yellow;
flex-basis: 150px;
}
#right {
background: skyblue;
flex-basis: 350px;
max-width: 250px;
}
- 结果:三个项目的实际宽度分别为400px 150px 250px
- 优先级:min-width和max-width>flex-basis>width
- 设置min-width时要保证其值比flex-basis小否则不起作用,max-width同理
7.4 flex-basis+flex-grow的效果
#left {
background: pink;
flex-basis: 200px;
flex-grow: 1;
}
#middle {
background: yellow;
flex-basis: 100px;
flex-grow: 1;
}
#right {
background: skyblue;
flex-basis: 100px;
flex-grow: 1;
}
- 结果:三个项目的宽度不是400px 200px 200px,而是333.33px 233.33px 233.33px
- 首先先给它们分别分配200px 100px 100px,剩余宽度=800-400px-400px
- 由于每个项目都设置了flex-grow:1,把这400px均分给三个项目,各再得133.33px
- 如果flex-grow不一样则按照比例分配
- flex-shrink同理
扫一扫
620
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
