Flexbox 布局是一种强大的 CSS 技术，它为我们提供了一种简单、灵活和响应式的布局方式。这种布局可以让我们轻松地控制和调整单个或多个元素在父容器中的位置和大小，使页面布局更加优美，而无需使用传统的浮动、定位和表格布局等。
什么是 Flexbox 布局？
Flexbox 是 Flexible Box 的缩写，即弹性布局，一种基于盒子模型的布局方式。它提供了简单的方式来响应式地调整容器、子元素的大小，并允许你重新排列它们的位置。Flexbox 布局的强大之处在于可以为子元素定义大小和位置的规则，而不会受到任何其他元素或浏览器窗口大小的影响。
一个典型的 Flexbox 布局如下所示：
<div class="parent"> <div class="child">Child 1</div> <div class="child">Child 2</div> <div class="child">Child 3</div> <div class="child">Child 4</div> </div>
-- -------------------- ---- ------- ------- - -------- ----- ---------------- ------- ------------ ------- --------------- ---- - ------ - ------ ------ ------- ------ ------- ----- -
在上面的示例中，.parent 容器使用 display: flex; 来指定它是一个可弹性布局的容器。然后我们通过 justify-content 和 align-items 属性来控制子元素在容器中的位置。 flex-direction 属性指定了子元素的排列方向。
优雅而实用的 Flexbox 布局
与传统的布局方式相比，Flexbox 布局提供了更加灵活和直观的方式来控制元素的位置和大小。下面是一些优美而实用的布局技巧，可帮助你更好地使用 Flexbox 布局：
1. 等分容器
如果你希望将容器中的子元素等距地间隔并占据整个容器，在父容器上定义 display: flex;，并将子元素的 flex 属性设置为 1，如下所示：
.parent {
display: flex;
}
.child {
flex: 1;
}2. 垂直居中
要水平和垂直居中 Flexbox 布局中的元素，使用以下 CSS 代码：
.parent {
display: flex;
justify-content: center;
align-items: center;
}3. 自适应宽度和高度
让元素在不同屏幕尺寸下自适应大小是一个很困难的问题。但是使用 Flexbox 布局可以很容易地解决这个问题。下面的代码演示了如何使子元素在不同屏幕宽度下自适应大小：
-- -------------------- ---- ------- ------- - -------- ----- ---------- ----- - ------ - ----------- --------- - --- ---------- --------- - --- ------- ----- -
4. 等高容器
让容器中的子元素等高是一个常见的需求，我们可以使用 display: flex; 和 align-items: stretch; 属性来实现这个效果：
.parent {
display: flex;
align-items: stretch;
}
.child {
flex: 1;
}总结
Flexbox 布局提供了一种灵活和响应式的方式来控制页面布局，可以使页面更加美观和易于响应式设计。使用上述技巧，你可以更加优雅地实现你的页面布局。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6482fcaa48841e9894259a8c