Flexbox 是一种强大的布局方式，可以轻松地实现复杂的布局需求。其中，justify-content 和 align-items 是两个最常用的属性，它们可以帮助我们定义元素在主轴和交叉轴上的对齐方式和分布方式。本文将详细介绍这两个属性的用法和实例。
justify-content
justify-content 属性用于定义元素在主轴上的分布方式，有以下几个取值：
- flex-start：元素在主轴上靠左对齐。
- flex-end：元素在主轴上靠右对齐。
- center：元素在主轴上居中对齐。
- space-between：元素在主轴上平均分布，两端不留空白。
- space-around：元素在主轴上平均分布，两端留有空白。
以下是一个示例代码，演示了 justify-content 的不同取值效果：
<div class="container"> <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ---------------- -------------- - ---- - ------ ------ ------- ------ ----------------- ----- ----------- ------- ------------ ------ -
align-items
align-items 属性用于定义元素在交叉轴上的对齐方式，有以下几个取值：
- flex-start：元素在交叉轴上靠上对齐。
- flex-end：元素在交叉轴上靠下对齐。
- center：元素在交叉轴上居中对齐。
- baseline：元素在交叉轴上以基线对齐。
- stretch：元素在交叉轴上拉伸，占据整个交叉轴空间。
以下是一个示例代码，演示了 align-items 的不同取值效果：
<div class="container"> <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ------------ ------- ------- ------ - ---- - ------ ------ ------- ------ ----------------- ----- ----------- ------- ------------ ------ -
总结
Flexbox 的 justify-content 和 align-items 属性是实现布局的重要工具，可以轻松地实现各种对齐和分布方式。在实际开发中，我们应该根据需求选择合适的取值，并结合其他属性一起使用，从而实现更加复杂的布局效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650e82bc95b1f8cacd7a2b82