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 根本不清楚。特别是，我不明白为什么我们应该使用两个不同的属性取决于内容是否适合一行或多个。

任何人都可以帮助解释它

谢谢！

解决方案

href =http://www.w3.org/TR/css-flexbox-1/#flex-lines =noreferrer> 6。 Flex Lines ，

：

  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;背景：蓝色;显示：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 =radioname =fdvalue =row行< / label> < label>< input type =radioname =fdvalue =row-reverse/> row-reverse< / label> < label>< input type =radioname =fdvalue =column/>列< / label> < label>< input type =radioname =fdvalue =column-reverse/> column-reverse< / label> < / li> < li> justify-content< label>< input type =radioname =jcvalue =flex-start flex-start< / label> < label>< input type =radioname =jcvalue =flex-end/> flex-end< / label> < label>< input type =radioname =jcvalue =center/>中心< / label> < label>< input type =radioname =jcvalue =space-between/>之间的空格< / label> < label>< input type =radioname =jcvalue =space-around/>空格周围< / label> < / li> < li> align-items< label>< input type =radioname =aivalue =flex-start/& flex-start< / label> < label>< input type =radioname =aivalue =flex-end/> flex-end< / label> < label>< input type =radioname =aivalue =center/>中心< / label> < label>< input type =radioname =aivalue =baseline/>基线< / label> < label>< input type =radioname =aivalue =stretchchecked /> stretch< / label> < / li> < li> align-content< label>< input type =radioname =acvalue =flex-start/& flex-start< / label> < label>< input type =radioname =acvalue =flex-end/> flex-end< / label> < label>< input type =radioname =acvalue =center/>中心< / label> < label>< input type =radioname =acvalue =space-between/>之间的空格< / label> < label>< input type =radioname =acvalue =space-around/>空格周围< / label> < label>< input type =radioname =acvalue =stretchchecked /> 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>  

I find the difference between align-items and align-content in CSS flexbox properties extremely confusing. I've been looking at the docs, and several examples online for hours, but 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.

Can anyone help explaining it in layman's terms?

Thanks!

解决方案

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屋！