什么是 Flexbox
Flexbox 是一种 CSS 布局模式，旨在使前端开发者更容易构建灵活、响应式和动态的布局。它允许我们通过设置容器和其子项之间的关系来实现自适应布局。
Flexbox 通过定义容器（flex container）和其子项（flex items）之间的关系来实现布局。我们可以使用一系列属性来定义这些关系，包括以下：
- Flex Container 属性
- display
- flex-direction
- flex-wrap
- justify-content
- align-items
- align-content
- Flex Item 属性
- order
- flex-grow
- flex-shrink
- flex-basis
- align-self
Flex Container 属性
display
display 属性用于定义一个容器是否为 flex container。
.container {
display: flex;
}flex-direction
flex-direction 属性用于定义子项的主轴方向。
.container {
flex-direction: row /* 默认值 */
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;
}flex-wrap
flex-wrap 属性用于定义子项的是否换行。
.container {
flex-wrap: nowrap; /* 默认值 */
flex-wrap: wrap;
flex-wrap: wrap-reverse;
}justify-content
justify-content 属性用于定义子项在主轴上的对齐方式。
.container {
justify-content: flex-start; /* 默认值 */
justify-content: flex-end;
justify-content: center;
justify-content: space-between;
justify-content: space-around;
justify-content: space-evenly;
}align-items
align-items 属性用于定义子项在交叉轴上的对齐方式。
.container {
align-items: stretch; /* 默认值 */
align-items: flex-start;
align-items: flex-end;
align-items: center;
align-items: baseline;
}align-content
align-content 属性用于定义多行子项在交叉轴上的对齐方式。
-- -------------------- ---- ------- ---------- - -------------- -------- -- --- -- -------------- ----------- -------------- --------- -------------- ------- -------------- -------------- -------------- ------------- - -- ---- ---- -- --- ----- ------- -------------- ------ ----- - ------ ---------- -- ---- - -- -
flex-grow
flex-grow 属性用于定义子项在剩余空间中的扩展比例。
.item {
flex-grow: <number>; /* 默认值为 0 */
}flex-shrink
flex-shrink 属性用于定义子项在缩小容器尺寸时的缩小比例。
.item {
flex-shrink: <number>; /* 默认值为 1 */
}flex-basis
flex-basis 属性用于定义子项在没有设置 width 或 height 时的基础尺寸。
.item {
flex-basis: <length> | auto; /* 默认值为 auto */
}align-self
align-self 属性用于定义单个子项在交叉轴上的对齐方式。
.item {
align-self: auto; /* 默认值 */
align-self: flex-start;
align-self: flex-end;
align-self: center;
align-self: baseline;
align-self: stretch;
}Flexbox 示例代码
以下是一个 Flexbox 布局的示例代码：
<div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- --------------- ---- ---------- ----- ---------------- -------------- ------------ ------- - ----- - ----------- ---- -------------- ----- -
在上面的示例代码中，我们创建了一个 .container 容器，并将其指定为 flex container。我们还通过设置 flex-direction 和 flex-wrap 属性来定义子项的布局。最后，我们使用 justify-content 和 align-items 属性来定义子项的对齐方式。通过设置 .item 子项的 flex-basis 属性，我们使其按宽度自适应布局。
总结
Flexbox 布局是一种非常强大和灵活的 CSS 布局模式，可以帮助我们更轻松地创建响应式和动态的布局。我们可以使用一系列属性来定义容器和其子项之间的关系，包括 display、flex-direction、flex-wrap、justify-content、align-items 和 align-content 等属性。此外，我们还可以通过设置子项的属性，如 order、flex-grow、flex-shrink、flex-basis 和 align-self 来进一步优化布局。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6472ea98968c7c53b0076421