Flexbox 布局是一项新的 CSS3 技术，可以更加方便地实现网页布局。在前端开发中，我们往往需要实现一个底部自适应的订单支付页面。在这篇文章中，我将介绍如何利用 Flexbox 布局实现这个页面，并给出示例代码，帮助读者更好地理解。
Flexbox 布局简介
Flexbox 布局是一种用于浏览器的一种弹性布局模型，目的是为了更加有效地管理容器内的元素在不同屏幕尺寸上容器内的位置关系、对齐方式以及行为等等。Flexbox 布局使用 CSS 属性来控制一个容器内的元素如何排列，并且可以实现响应式设计，简化 CSS 代码，提高代码质量与可维护性。
Flexbox 布局可以用于以下场景：
- 需要布局指定大小的容器内的元素。
- 需要将元素垂直或者水平对齐。
- 需要容器内的元素按照比例分配空间。
- 需要容器内的元素自适应其父容器大小。
- 需要元素的排序，并且需要在不同的屏幕尺寸下保持正确的顺序。
- 需要将元素在行内或者列内排列，类似于表格布局。
底部自适应的订单支付页面
在该页面中，订单信息与支付信息分别位于两个不同的 div 容器中。我们需要使得订单信息容器占据页面中除支付信息容器外的全部空间，并且使得底部按钮固定在页面底部。
以下是这个页面的 HTML 结构：
<body>
<div class="container">
<div class="order">
<h2>订单信息</h2>
<ul>
<li>商品名称：小米 Notebook Air</li>
<li>单价：8999.00 元</li>
<li>数量：1</li>
</ul>
</div>
<div class="payment">
<h2>支付信息</h2>
<form>
<input type="text" placeholder="请输入信用卡卡号">
<input type="text" placeholder="请输入信用卡有效期">
<input type="text" placeholder="请输入信用卡背后三位数">
<button>支付</button>
</form>
</div>
</div>
<div class="footer">
<a href="#">关于我们</a>
<a href="#">帮助中心</a>
<a href="#">联系我们</a>
<a href="#">版权声明</a>
</div>
</body>以下是这个页面的 CSS 代码，注意这里使用了 Flexbox 布局：
body {
display: flex;
flex-direction: column;
height: 100vh;
}
.container {
flex: 1;
display: flex;
}
.order {
flex: 1;
}
.payment {
width: 300px;
margin-left: 20px;
}
.footer {
display: flex;
justify-content: flex-end;
align-items: center;
background-color: #f5f5f5;
height: 60px;
padding-right: 20px;
}
.footer a {
margin-left: 20px;
}在这个 CSS 代码中，我们对 body 标签应用了 Flexbox 布局，并设置了其将元素从上到下展示。接下来，我们设置了 .container 容器，将其设置为 1:1 的比例，即占据整个页面剩余空间。
对于 .order 容器，我们设置其 flex 属性为 1，以确保它占据了 .container 容器内除 .payment 容器外的全部空间。
对于 .payment 容器，我们将其宽度设置为 300 像素，并在左侧留出 20 像素的空白。这里的设置相对比较简单。
最后，我们设置了 .footer 容器，将其设置为 Flexbox 布局，并使用 justify-content: flex-end 属性将其相对父容器右对齐，使用 align-items: center 属性将其内部元素垂直居中。
总结
Flexbox 布局是一项强大的 CSS 技术，可以帮助开发者更好地管理容器内的元素排列与对齐，并且提供了许多有用的属性。在实现底部自适应的订单支付页面时，使用 Flexbox 布局可以轻松实现这一效果，并且简化了 CSS 代码。希望这篇文章能对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65a23fc0add4f0e0ffa55bef