CSS Flexbox:align-items 和 align-content 之间的区别 [英] CSS Flexbox: difference between align-items and align-content

问题描述

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

更准确地说，align-items 对我来说完全有意义，它的行为方式完全清楚.另一方面，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 {显示:弹性；flex-flow:行包装；填充:0；列表样式:无；}李{填充:0 15px；}标签 {显示:块；}#柔性 {显示:弹性；flex-wrap: 包裹;高度:240px；宽度:240px；边框:1px 实心 #000；背景:黄色；}#flex >div {最小宽度:60px；最小高度:60px；边框:1px 实心 #000；背景:蓝色；显示:弹性；对齐内容:居中；对齐项目:居中；颜色:#fff;}#flex >.大的 {字体大小:1.5em；最小宽度:70px；最小高度:70px；}

<ul><li>flex-direction<label><input type="radio" name="fd" value="row" 选中/>行<label><input type="radio" name="fd" value="row-reverse"/>行反转</label><label><input type="radio" name="fd" value="column"/>列<label><input type="radio" name="fd" value="column-reverse"/>列反向</label><li>justify-content<label><input type="radio" name="jc" value="flex-start" 勾选/>flex-start</label><label><input type="radio" name="jc" value="flex-end"/>flex-end</label><label><input type="radio" name="jc" value="center"/>中心<label><input type="radio" name="jc" value="space-between"/>间隔</label><label><input type="radio" name="jc" value="space-around"/>空格</label><li>对齐项目<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"/>中心<label><input type="radio" name="ai" value="baseline"/>基线<label><input type="radio" name="ai" value="stretch" 勾选/>拉伸<li>对齐内容<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"/>中心<label><input type="radio" name="ac" value="space-between"/>间隔</label><label><input type="radio" name="ac" value="space-around"/>空格</label><label><input type="radio" name="ac" value="stretch" 选中/>拉伸</表单><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>

I find the difference between align-items and align-content in CSS Flexbox properties extremely confusing. I've been looking at the documentation, and several examples online for hours, but I still can't fully grasp it.

To be more precise, align-items makes total sense to me and it's completely clear how it behaves. On the other hand, align-content is not clear at all. In particular, I don't understand why we should use two different properties depending on whether the content all fits in one line or multiple ones.

What is the explanation in layman's terms?

解决方案

As described in 6. Flex Lines,

Flex items in a flex container are laid out and aligned within flex lines, hypothetical containers used for grouping and alignment by the layout algorithm. A flex container can be either single-line or multi-line, depending on the flex-wrap property

Then, you can set different alignments:

• The justify-content property applies to all flex containers, and sets the alignment of the flex items along the main axis of each flex line.

• The align-items property applies to all flex containers, and sets the default alignment of the flex items along the cross axis of each flex line. The align-self applies to all flex items, allows this default alignment to be overridden for individual flex items.

• The align-content property only applies to multi-line flex containers, and aligns the flex lines within the flex container when there is extra space in the cross-axis.

Here you have a snippet to play:

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>

这篇关于CSS Flexbox:align-items 和 align-content 之间的区别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！