什么是 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。
---------- - -------- ----- -
flex-direction
flex-direction 属性用于定义子项的主轴方向。
---------- - --------------- --- -- --- -- --------------- ------------ --------------- ------- --------------- --------------- -
flex-wrap
flex-wrap 属性用于定义子项的是否换行。
---------- - ---------- ------- -- --- -- ---------- ----- ---------- ------------- -
justify-content
justify-content 属性用于定义子项在主轴上的对齐方式。
---------- - ---------------- ----------- -- --- -- ---------------- --------- ---------------- ------- ---------------- -------------- ---------------- ------------- ---------------- ------------- -
align-items
align-items 属性用于定义子项在交叉轴上的对齐方式。
---------- - ------------ -------- -- --- -- ------------ ----------- ------------ --------- ------------ ------- ------------ --------- -
align-content
align-content 属性用于定义多行子项在交叉轴上的对齐方式。
---------- - -------------- -------- -- --- -- -------------- ----------- -------------- --------- -------------- ------- -------------- -------------- -------------- ------------- - -- ---- ---- -- --- ----- ------- -------------- ------ ----- - ------ ---------- -- ---- - -- -
flex-grow
flex-grow 属性用于定义子项在剩余空间中的扩展比例。
----- - ---------- --------- -- ---- - -- -
flex-shrink
flex-shrink 属性用于定义子项在缩小容器尺寸时的缩小比例。
----- - ------------ --------- -- ---- - -- -
flex-basis
flex-basis 属性用于定义子项在没有设置 width 或 height 时的基础尺寸。
----- - ----------- -------- - ----- -- ---- ---- -- -
align-self
align-self 属性用于定义单个子项在交叉轴上的对齐方式。
----- - ----------- ----- -- --- -- ----------- ----------- ----------- --------- ----------- ------- ----------- --------- ----------- -------- -
Flexbox 示例代码
以下是一个 Flexbox 布局的示例代码：
---- ------------------ ---- ----------------- ------- ---- ----------------- ------- ---- ----------------- ------- ------
---------- - -------- ----- --------------- ---- ---------- ----- ---------------- -------------- ------------ ------- - ----- - ----------- ---- -------------- ----- -
在上面的示例代码中，我们创建了一个 .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