Flexbox 是一个强大的 CSS 布局模式，它提供了一种简单而灵活的方式来控制容器中子元素的位置和大小。通过使用 Flexbox，我们可以设计出现代化、响应式的布局，并从中受益。本篇文章将深入介绍 Flexbox 布局如何控制子元素在父元素中的位置。
1. Flexbox 布局是什么？
Flexbox 是一种 CSS 布局模式，用于以灵活的方式控制容器中子元素的位置和大小。它使用容器和项目两种元素类型，通过适用于内部元素（项目）的灵活方向、对齐和顺序的方式，使得布局更加简单、快速和可维护。这种布局模式可以在现代 Web 设计中得到广泛应用，因为它能够更好地适应不同的浏览器大小、不同的屏幕设备。
2. Flexbox 布局的实现
Flexbox 布局是由一组 CSS 属性控制的。它们是容器属性和项目属性。
容器属性
- display: 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;（定义多根轴线的对齐方式）
项目属性
- order: <integer>;（定义项目的排列顺序。数值越小，排列越靠前，默认为 0）
- flex-grow: <number>;（定义项目的放大比例，默认为 0，即不放大）
- flex-shrink: <number>;（定义项目的缩小比例，默认为 1，即如果空间不足，该项目将缩小）
- flex-basis: <length> | auto;（定义项目在分配多余空间之前，占据主轴空间的大小）
- flex: flex-grow flex-shrink flex-basis;（是 flex-grow, flex-shrink 和 flex-basis 的简写）
- align-self: auto | flex-start | flex-end | center | baseline | stretch;（允许单个项目与其他项目不同，在交叉轴上对齐方式不一样）
3. 如何用 Flexbox 布局控制子元素在父元素中的位置
Flexbox 布局提供了多种方法来控制子元素在父元素中的位置。以下是其中的一些技术：
3.1 将子元素放在父元素的中心位置
通过在父元素上定义 justify-content: center 和 align-items: center，可以将子元素放在父元素的中心位置。下面是一个示例代码：
<div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ---------------- ------- ------------ ------- ------- ------ ----------- -------- - ----- - ------ ----- ------- ----- ----------- ----- ------ ----- -------- ----- ---------------- ------- ------------ ------- -
这将使子元素水平和垂直居中对齐。
3.2 让子元素水平排列
通过在父元素上定义 flex-direction: row，可以让子元素水平排列。下面是一个示例代码：
<div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- --------------- ---- ---------------- ------------- ------------ ------- ------- ------ ----------- -------- - ----- - ------ ----- ------- ----- ----------- ----- ------ ----- -------- ----- ---------------- ------- ------------ ------- -
这将使子元素水平排列，并将它们均匀分布在容器中。可以使用 justify-content 属性更改项目之间的间隔。
3.3 实现“九宫格”布局
可以通过结合使用 flex-wrap: wrap 和 align-content: space-between，以及固定容器大小来实现“九宫格”布局。下面是一个示例代码：
-- -------------------- ---- ------- ---- ------------------ ---- ----------------- ------- ---- ----------------- ------- ---- ----------------- ------- ---- ----------------- ------- ---- ----------------- ------- ---- ----------------- ------- ---- ----------------- ------- ---- ----------------- ------- ---- ----------------- ------- ------
-- -------------------- ---- ------- ---------- - -------- ----- ---------- ----- -------------- -------------- ------- ------ ------ ------ ----------- -------- - ----- - ----------- ----------- - ------ ------- ---- ------- ----- ----------- ----- ------ ----- -------- ----- ---------------- ------- ------------ ------- -
这将使子元素均匀分布在容器中，并在项目之间留出空白。可以使用 flex-basis 属性更改项目的大小和间距，以及使用 margin 属性为项目之间留出空白。
4. 总结
在本篇文章中，我们学习了 Flexbox 布局如何控制子元素在父元素中的位置。我们探讨了实现基本的布局和更高级的布局技术，并提供了代码示例。将 Flexbox 布局应用于网站中，可以使网站更加现代化、响应式和易于维护。如果您想了解更多 Flexbox 布局的知识，请查看 MDN 的文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c1bf4983d39b48815f6237