Flexbox 是一种强大的 CSS 布局模式，它可以帮助我们轻松地创建响应式布局。其中的 Box Alignment 属性是一组用于控制布局中元素对齐方式的属性，本文将详细介绍这些属性的使用方法和指导意义。
align-items
align-items 属性用于控制元素在交叉轴上的对齐方式。它有以下几个取值：
flex-start：元素在交叉轴上顶部对齐。flex-end：元素在交叉轴上底部对齐。center：元素在交叉轴上居中对齐。baseline：元素在交叉轴上基线对齐。stretch：元素在交叉轴上拉伸以填满容器。
<div class="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ------------ ------- ------- ------ ------- --- ----- ----- - ----- - ------ ------ ------- ----- ----------------- ----- ------- ----- -
在这个例子中，我们将容器的交叉轴对齐方式设置为居中对齐，这样容器中的三个元素就会在交叉轴上居中对齐。
justify-content
justify-content 属性用于控制元素在主轴上的对齐方式。它有以下几个取值：
flex-start：元素在主轴上左对齐。flex-end：元素在主轴上右对齐。center：元素在主轴上居中对齐。space-between：元素在主轴上平均分布，首尾不留空白。space-around：元素在主轴上平均分布，首尾留有空白。
<div class="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ---------------- ------------- ------- ------ ------- --- ----- ----- - ----- - ------ ------ ------- ----- ----------------- ----- -
在这个例子中，我们将容器的主轴对齐方式设置为平均分布并留有空白，这样容器中的三个元素就会在主轴上平均分布并留有空白。
align-self
align-self 属性用于控制单个元素在交叉轴上的对齐方式，它可以覆盖 align-items 属性。它有以下几个取值：
auto：元素继承父容器的align-items属性。flex-start：元素在交叉轴上顶部对齐。flex-end：元素在交叉轴上底部对齐。center：元素在交叉轴上居中对齐。baseline：元素在交叉轴上基线对齐。stretch：元素在交叉轴上拉伸以填满容器。
<div class="container"> <div class="item"></div> <div class="item align-self-start"></div> <div class="item"></div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ------------ ------- ------- ------ ------- --- ----- ----- - ----- - ------ ------ ------- ----- ----------------- ----- ------- ----- - ----------------- - ----------- ----------- -
在这个例子中，我们将第二个元素的交叉轴对齐方式设置为顶部对齐，这样它就会在交叉轴上顶部对齐。
justify-self
justify-self 属性用于控制单个元素在主轴上的对齐方式，它可以覆盖 justify-content 属性。它有以下几个取值：
auto：元素继承父容器的justify-content属性。flex-start：元素在主轴上左对齐。flex-end：元素在主轴上右对齐。center：元素在主轴上居中对齐。baseline：元素在主轴上基线对齐。stretch：元素在主轴上拉伸以填满容器。
<div class="container"> <div class="item"></div> <div class="item justify-self-end"></div> <div class="item"></div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ---------------- ------------- ------- ------ ------- --- ----- ----- - ----- - ------ ------ ------- ----- ----------------- ----- - ----------------- - ------------- --------- -
在这个例子中，我们将第二个元素的主轴对齐方式设置为右对齐，这样它就会在主轴上右对齐。
align-content
align-content 属性用于控制多行元素在交叉轴上的对齐方式，只有在容器中有多行元素时才有意义。它有以下几个取值：
flex-start：多行元素在交叉轴上顶部对齐。flex-end：多行元素在交叉轴上底部对齐。center：多行元素在交叉轴上居中对齐。space-between：多行元素在交叉轴上平均分布，首尾不留空白。space-around：多行元素在交叉轴上平均分布，首尾留有空白。stretch：多行元素在交叉轴上拉伸以填满容器。
<div class="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ---------- ----- -------------- -------------- ------- ------ ------- --- ----- ----- - ----- - ------ ------ ------- ----- ----------------- ----- ------- ----- -
在这个例子中，我们将容器的交叉轴对齐方式设置为平均分布并留有空白，这样容器中的六个元素就会在交叉轴上平均分布并留有空白。
总结
Flexbox Box Alignment CSS 属性是一组用于控制布局中元素对齐方式的属性，它们可以帮助我们轻松地创建响应式布局。在实际开发中，我们应该根据具体情况选择合适的属性来控制元素的对齐方式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6551c2b2d2f5e1655db7bd8f