CSS Flexbox：对齐项目和对齐内容之间的区别[重复]

Posted 2023-03-05

【中文标题】CSS Flexbox：对齐项目和对齐内容之间的区别[重复]

【英文标题】：CSS Flexbox: difference between align-items and align-content [duplicate]

【发布时间】：2015-09-23 20:31:35

【问题描述】：

我发现 CSS Flexbox 属性中 align-items 和 align-content 之间的区别非常令人困惑。我已经看了几个小时的文档和几个在线示例，但我仍然无法完全掌握它。

更准确地说，align-items 对我来说完全有意义，而且它的行为方式完全清楚。另一方面，align-content 则完全不清楚。特别是，我不明白为什么我们应该使用两个不同的属性，具体取决于内容是否都适合一行或多行。

通俗的解释是什么？

【参考方案1】：

首先你需要了解弹性盒子结构是如何工作的。下图是Cheatsheet的一部分。

弹性盒结构

Flexbox 是为适应行和列而构建的。

主轴：

当 flex-direction 为 row 时：x 轴与图表一样。当 flex-direction 为 column 时：图上的 y 轴

横轴：

当 flex-direction 为 column 时：x 轴与图表一样。当 flex-direction 为 row 时：图上的 y 轴

对齐内容

justify-content 用于将项目与主轴对齐。

.justify-content 
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  height: 500px;
  width: 500px;
  background: lightgray;
  padding: 5px;

.box 
  background: tomato;
  width: 100px;
  height: 100px;
  margin: 10px;

<div class="justify-content">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

对齐内容

align-content 用于沿 cross-axis 对齐 flexbox 内的项目。请注意，它适用于Multi-line containers

.align-content 
  display: flex;
  align-content: center;
  flex-wrap: wrap;
  height: 500px;
  width: 500px;
  background: lightgray;
  padding: 5px;

.box 
  background: tomato;
  width: 100px;
  height: 100px;
  margin: 10px;

<div class="align-content">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

对齐项

align-items 与align-content 具有相同的功能，但不同之处在于它可以使每个单行容器居中，而不是使整个容器居中。检查在 sn-p 中，整个容器被划分为每个 250 像素高度并居中，而在align-content 中，它在行的 500 像素高度内居中。

.align-items 
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  height: 500px;
  width: 500px;
  background: lightgray;
  padding: 5px;

.box 
  background: tomato;
  width: 100px;
  height: 100px;
  margin: 10px;

<div class="align-items">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

【讨论】：

您好 Manoj，感谢您的回答！当您说“Align-content 用于沿横轴对齐 flexbox 内的项目，如果您拍摄图表，则为 y 轴”，这实际上不是 align-items 应该做的吗？这正是我如此困惑的原因。

align-content 适用于多行容器。 align-items 为单行容器工作:)

我想我已经开始了解整个事情了，尽管我仍然觉得它有些混乱，并且在文档中没有以简单的方式解释。谢谢！

我再次编辑了代码以显示设置了 flex 属性的父容器。如果这对你来说不容易，请告诉我。

嗨 Manoj，你认为有可能实现a layout identical to this one，但使用flex-direction: row？

【参考方案2】：

如6. Flex Lines中所述，

flex container 中的Flex items 已布局并对齐 在 flex lines 中，用于分组和 通过布局算法对齐。弹性容器可以是 single-line 或 multi-line，取决于 flex-wrap 属性

然后，您可以设置不同的对齐方式：

justify-content 属性适用于所有弹性容器，并设置弹性项目沿每条弹性线的主轴的对齐方式。

align-items 属性适用于所有弹性容器，并设置弹性项目沿每条弹性线的交叉轴的默认对齐方式。 align-self 适用于所有弹性项目，允许为单个弹性项目覆盖此默认对齐方式。

align-content 属性仅适用于多行 flex 容器，当横轴有多余空间时，会在 flex 容器内对齐 flex 线。

这里有一个 sn-p 可以玩：

var form = document.forms[0],
    flex = document.getElementById('flex');
form.addEventListener('change', function() 
  flex.style.flexDirection = form.elements.fd.value;
  flex.style.justifyContent = form.elements.jc.value;
  flex.style.alignItems = form.elements.ai.value;
  flex.style.alignContent = form.elements.ac.value;
);

ul 
  display: flex;
  flex-flow: row wrap;
  padding: 0;
  list-style: none;

li 
  padding: 0 15px;

label 
  display: block;

#flex 
  display: flex;
  flex-wrap: wrap;
  height: 240px;
  width: 240px;
  border: 1px solid #000;
  background: yellow;

#flex > div 
  min-width: 60px;
  min-height: 60px;
  border: 1px solid #000;
  background: blue;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;

#flex > .big 
  font-size: 1.5em;
  min-width: 70px;
  min-height: 70px;

<form>
  <ul>
    <li>flex-direction
      <label><input type="radio" name="fd" value="row" checked /> row</label>
      <label><input type="radio" name="fd" value="row-reverse" /> row-reverse</label>
      <label><input type="radio" name="fd" value="column" /> column</label>
      <label><input type="radio" name="fd" value="column-reverse" /> column-reverse</label>
    </li>
    <li>justify-content
      <label><input type="radio" name="jc" value="flex-start" checked /> flex-start</label>
      <label><input type="radio" name="jc" value="flex-end" /> flex-end</label>
      <label><input type="radio" name="jc" value="center" /> center</label>
      <label><input type="radio" name="jc" value="space-between" /> space-between</label>
      <label><input type="radio" name="jc" value="space-around" /> space-around</label>
    </li>
    <li>align-items
      <label><input type="radio" name="ai" value="flex-start" /> flex-start</label>
      <label><input type="radio" name="ai" value="flex-end" /> flex-end</label>
      <label><input type="radio" name="ai" value="center" /> center</label>
      <label><input type="radio" name="ai" value="baseline" /> baseline</label>
      <label><input type="radio" name="ai" value="stretch" checked /> stretch</label>
    </li>
    <li>align-content
      <label><input type="radio" name="ac" value="flex-start" /> flex-start</label>
      <label><input type="radio" name="ac" value="flex-end" /> flex-end</label>
      <label><input type="radio" name="ac" value="center" /> center</label>
      <label><input type="radio" name="ac" value="space-between" /> space-between</label>
      <label><input type="radio" name="ac" value="space-around" /> space-around</label>
      <label><input type="radio" name="ac" value="stretch" checked /> stretch</label>
    </li>
  </ul>
</form>
<div id="flex">
  <div>1</div>
  <div class="big">2</div>
  <div>3</div>
  <div>4</div>
  <div class="big">5</div>
  <div>6</div>
</div>