CSS flexbox:align-items和align-content之间的区别

Question

我发现CSS align-items和align-contentFlexbox属性之间的区别非常混乱.我一直在看文档和几个小时在线的几个例子,但仍然无法完全掌握它.

更确切地说,align-items对我来说是完全合理的,并且它的行为是完全清楚的.另一方面,align-content根本不清楚.特别是,我不明白为什么我们应该使用两个不同的属性,具体取决于内容是全部适合一行还是多行.

任何人都可以帮助以外行的方式解释它吗？

谢谢!

Answer 1

如6. Flex Lines中所述,

挠曲件在柔性容器被布局和内对准的弯折线,用于由布局算法分组和对准假想容器.柔性容器可以是 单线或多行,这取决于柔性缠绕 属性

然后,您可以设置不同的对齐方式:

• 该justify-content属性适用于所有弹性容器,并设置弹性项目沿每个柔性线的主轴的对齐方式.

  

• 该align-items属性适用于所有Flex容器,并设置Flex项目沿每条柔性线的交叉轴的默认对齐方式.将align-self适用于所有Flex项目,允许覆盖各个柔性物品此默认对齐.

  

• 该align-content属性仅适用于多线柔性容器,并且当横轴中有额外空间时,将柔性容器内的柔性线对齐.

  

在这里你有一个片段可以玩:

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>

Answer 2

首先,您需要了解Flexible box结构的工作原理.下图是Cheatsheet的一部分

Flexbox结构

Flexbox的构建是为了适应行和列.

主轴线:

当flex-direction为row时:x轴为曲线图,当flex-direction为column时:y轴为曲线图

交叉轴:

当flex-direction为列时:x轴如图表所示,当flex-direction为row时:y轴为图形

对齐内容

justify-content用于沿着对齐项目main-axis.

.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.请注意,它适用于多行容器

.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但不同之处在于它可以使每个单行容器居中,而不是使整个容器居中.检查片段中的整个容器是否分成250px高度并居中,而在align-content其中心位于行的500px高度内.

.align-content {
  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-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>