一、CSS Flexbox介绍
Flexbox也叫伸缩布局,是CSS3中引入的新一代的布局方案。通过父容器中的flex布局,可以轻松实现自适应网页的效果。由于其强大的且简洁的属性,使得实现流式布局成为一件轻松的事情。
为了方便后续深入阐述,这里为大家介绍几个重要的属性:
container {
display: flex|inline-flex; /* 设置flex容器 */
flex-direction: row|row-reverse|column|column-reverse; /* 设置主轴方向 */
flex-wrap: nowrap|wrap|wrap-reverse; /* 设置缩放时是否换行 */
flex-flow: <flex-direction> || <flex-wrap>; /* flex-direction与flex-wrap的组合 */
justify-content: flex-start|flex-end|center|space-between|space-around; /* 设置主轴上的对齐方式 */
align-items: flex-start|flex-end|center|baseline|stretch; /* 设置侧轴上的对齐方式 */
align-content: flex-start|flex-end|center|space-between|space-around|stretch; /* 多根轴线上的对齐方式 */
}
二、Flexbox的应用场景
Flexbox实现了自适应布局,比较适合于现在流行的各种尺寸的设备,比如:桌面、平板、手机、电视等。特别是在模块化布局、居中布局、底部固定布局等场景中,Flexbox能够更好的发挥出自己的优势。
三、Flexbox的应用举例
在这里,我们通过举例来详细讲解Flexbox的应用过程。
1. 模块化布局
为了更加清晰的展现该场景,这里为大家准备了一个DEMO例子(点击下面的按钮查看效果):
在这个例子中,我们创造了若干的子模块,并将它们自动适应容器的大小以及每个子模块的相对宽度和高度。
.container {
height: 500px;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
}
.module {
width: 100px;
height: 100px;
margin: 10px;
background-color: #003399;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
font-weight: 600;
}
通过设置主轴方向为"row"(水平方向),子元素自动换行以便适应浏览器窗口的缩放。使子元素在容器中自适应布局。
2. 居中布局
居中布局是Flexbox的又一个优秀应用。通过设置子元素的对齐方式,可以轻松实现子元素在容器中的居中布局,这里还是用实际的DEMO来演示:
.container {
height: 500px;
display: flex;
justify-content: center;
align-items: center;
}
.module {
width: 100px;
height: 100px;
background-color: #003399;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
font-weight: 600;
}
这个例子中,我们通过设置容器为核心,并使用justify-content和align-items属性,轻松实现了子元素的实现居中布局。
3. 底部固定布局
通过Flexbox,实现底部固定布局也非常容易。下面是代码展示以及DEMO:
.container {
height: 500px;
display: flex;
flex-flow: column;
justify-content: space-between;
}
.header {
width: 100%;
height: 50px;
background-color: #003399;
color: #fff;
margin-bottom: 10px;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
font-weight: 600;
}
.footer {
width: 100%;
height: 40px;
background-color: #1a1a1a;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
font-size: 18px;
font-weight: 600;
}
代码中,我们通过设置容器的方向属性为column,让子元素从上到下垂直排列。接着在容器上使用justify-content: space-between属性,使得header和footer与其它子元素之间有空隙且保持固定位置。
四、Flexbox vs. Grid
在一些相对固定布局的场景下,CSS Grid布局可能会更适合一点。但相对于复杂的布局,还是优先考虑Flexbox。下面,我们来看一下两者的比较:
Flexbox | Grid |
---|---|
一维布局 | 二维布局 |
子元素间间距不同难以控制 | 可以精确控制子元素间的距离 |
适合自适应布局 | 适合相对固定的布局方案 |
适用于平面、交错布局等 | 适用于网格、表格等 |
五、总结
通过以上的详细讲解,我们可以很容易的理解Flexbox的强大之处及其应用场景。通过灵活的设置属性,可以轻松实现流式布局和自适应布局,使得网页更加美观和易于浏览。同时,与CSS Grid相比,Flexbox在一些特定场景下相对优势更大一些。