原文合集地址如下,有需要的朋友可以关注
Flex布局(Flexible Box Layout)是CSS3中引入的一种强大的布局模型,它为开发人员提供了一种简单而灵活的方式来构建现代网页布局。本文将深入解读Flex布局的核心概念和属性,以及如何应用Flex布局来构建灵活的响应式布局。
什么是Flex布局
Flex布局是一种CSS布局模型,它的目标是为了解决传统布局方式在构建复杂布局时的限制和不足。Flex布局的优势在于它提供了强大的自适应能力和灵活性,使得开发人员能够更轻松地实现水平居中、垂直居中、等高列布局等复杂布局效果。
主轴与交叉轴:
Flex布局涉及到两个主要轴线:主轴和交叉轴。主轴是Flex容器的主要方向,通常是水平方向或垂直方向。而交叉轴是垂直于主轴的轴线。
主轴由 flex-direction 定义,可以取 4 个值:
row、row-reverse、column、column-reverse
如果你选择了 row 或者 row-reverse,你的主轴将沿着 inline 方向延伸。
选择 column 或者 column-reverse 时,你的主轴会沿着上下方向延伸 — 也就是 block 排列的方向。
Flex容器的常用属性详解:
flex-direction
:控制Flex项目在Flex容器中的排列方向。justify-content设置子元素在主轴上的对齐方式
- flex-start(默认):起点对齐
- flex-end:终点对齐
- center:居中对齐
- space-between:等间距分布,首尾贴边
- space-around:等间距分布,首尾不贴边
- align-items设置子元素在交叉轴上的对齐方式。
- stretch(默认):拉伸填充
- flex-start:起点对齐
- flex-end:终点对齐
- center:居中对齐
- baseline:基线对齐
- 通过align-self设置单个子元素在交叉轴上的对齐
- auto: 继承父元素的align-items属性,如果没有会取默认值stretch。
- stretch: 拉伸填满整个交叉轴的高度(默认值)。
- flex-start: 元素顶部与交叉轴的起点对齐。
- flex-end: 元素底部与交叉轴的终点对齐。
- center: 元素在交叉轴居中显示。
- baseline: 元素的基线对齐。
- auto: 继承父元素的align-items属性,如果没有会取默认值stretch。
align-content
:当Flex项目在交叉轴上有多余空间时,控制多行或多列的对齐方式。
flex-grow、flex-shrink 和 flex-basis
flex-grow、flex-shrink和 flex-basis
flex-grow、flex-shrink 和 flex-basis 是 Flexbox 中非常重要的三个属性,用来控制 flex 项目的尺寸。
它们能使我们在主轴方向上控制弹性元素的尺寸和伸缩性。
flex-grow: 定义项目的放大比例,默认为0(即存在剩余空间也不放大)。
flex-shrink: 定义项目的缩小比例,默认为1(空间不足时会缩小)。
flex-basis: 定义了在分配多余空间之前,项目占据的主轴空间,默认为auto,即项目本来大小。
- flex-grow 属性:
flex-grow
属性定义 Flex 项目在可用空间中如何放大。- 默认值为 0,表示项目不会放大。如果项目具有
flex-grow
值,则会相对于其他具有更小flex-grow
值的项目进行放大。 - 该属性接受一个非负整数值。值越大,项目将在放大阶段占用更多空间。
示例:
.container {
display: flex;
}
.item {
flex-grow: 1; /* 所有项目具有相同的 flex-grow 值,将等分可用空间 */
/* flex-grow: 2; 该项目的放大优先级高,将获得更多的可用空间 */
}
- flex-shrink属性:
flex-shrink
属性定义 Flex 项目在空间不足时如何缩小。- 默认值为 1,表示项目会相对于其他具有更大
flex-shrink
值的项目进行缩小。 - 该属性接受一个非负整数值。值越大,项目在缩小阶段会占用更少的空间。
示例:
.container {
display: flex;
}
.item {
flex-shrink: 1; /* 所有项目具有相同的 flex-shrink 值,将等比例缩小 */
/* flex-shrink: 2; 该项目的缩小优先级高,将缩小得更多 */
}
- flex-basis 属性:
flex-basis
属性定义了 Flex 项目在分配空间之前的基准大小。它类似于 width 或 height 属性。- 默认值为
auto
,表示项目的原始大小不会受到影响。也可以使用像素值或百分比值来指定项目的基准大小。 - 该属性在不考虑
flex-grow
和flex-shrink
的情况下,确定项目在主轴上的大小。
示例:
.container {
display: flex;
}
.item {
flex-basis: 100px; /* 设置项目的基准大小为 100 像素 */
/* flex-basis: 50%; 设置项目的基准大小为父容器宽度的一半 */
}
综合示例:
<div class="container">
<div class="item" style="flex-grow: 1; flex-basis: 100px;">Item 1</div>
<div class="item" style="flex-grow: 2; flex-basis: 150px;">Item 2</div>
<div class="item" style="flex-shrink: 1; flex-basis: 200px;">Item 3</div>
</div>
在上述示例中,有三个 Flex 项目,并且分别使用了flex-grow
、flex-shrink
和 flex-basis
属性。项目 1 和项目 2 具有不同的flex-grow
和 flex-basis
值,这意味着它们会在放大阶段和缩小阶段获得不同的可用空间。项目 3 具有不同的flex-shrink
和 flex-basis
值,这意味着它在空间不足时会相对于其他项目缩小得更多。
Flex布局的常见布局实例:
- 水平居中:使用
justify-content
来实现Flex项目在主轴上的居中对齐。
.parent{
display:flex;
justify-content:center;
}
- 垂直居中:使用
align-items
或align-self
来实现Flex项目在交叉轴上的居中对齐。
.parent {
display: flex;
justify-content: center;
align-items: center;
}
- 等高列布局:通过设置
flex-grow
属性来实现多列等高布局。
HTML 结构:
<div class="container">
<div class="column">Column 1<br>Content of Column 1</div>
<div class="column">Column 2<br>Content of Column 2</div>
<div class="column">Column 3<br>Content of Column 3</div>
</div>
CSS 样式:
.container {
display: flex;
}
.column {
flex: 1;
padding: 20px;
border: 1px solid #ccc;
}
在这个示例中,我们使用了 Flex 容器 .container
包含了三个列 .column
。通过设置 .column
元素的 flex: 1;
属性,每个列都会均分剩余空间,从而实现等高列布局。
- 底部固定栏:使用
margin-top: auto
和align-self: flex-end
将底部栏固定在Flex容器的底部。
将底部固定栏放在 Flex 容器的最底部,并设置容器的属性使其占据剩余空间。以下是一个示例:
HTML 结构:
<div class="container">
<div class="content">Content goes here</div>
<div class="footer">This is the fixed footer</div>
</div>
CSS 样式:
body, html {
height: 100%;
margin: 0;
}
.container {
display: flex;
flex-direction: column;
min-height: 100%;
}
.content {
flex: 1;
padding: 20px;
}
.footer {
flex-shrink: 0;
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
在这个示例中,我们使用 Flex 容器 .container
来容纳内容和底部固定栏。通过设置 .container
的 min-height: 100%;
,使其至少占满整个屏幕高度,即使内容不够长时,底部固定栏也会保持在底部。
【总结】:
Flex布局是一种强大而灵活的布局模型,通过灵活控制Flex容器和Flex项目的属性,我们可以轻松地构建复杂的响应式布局。掌握Flex布局将成为现代网页开发的必备技能,它将带来更好的用户体验和更高的开发效率。