参见英文答案 >
@L_404_0@7个
我发现CSS flexBox属性中的align-items和align-content之间的区别非常混乱.我一直在看文档,几个小时在线几个例子,但仍然无法完全掌握它.
我发现CSS flexBox属性中的align-items和align-content之间的区别非常混乱.我一直在看文档,几个小时在线几个例子,但仍然无法完全掌握它.
更准确地说,对齐项目对我来说是完全合理的,并且它完全清楚它的行为方式.另一方面,对齐内容根本不清楚.特别是,我不明白为什么我们应该使用两个不同的属性,具体取决于内容是全部适合一行还是多行.
任何人都可以帮助以外行的方式解释它吗？
谢谢！
解决方法
如
6. Flex Lines所述,
07001 in a 07002 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
07003 or 07004,depending on the 07005
property
然后,您可以设置不同的对齐方式：
> justify-content属性适用于所有弹性容器,并设置弹性项目沿每条柔性线的主轴的对齐方式.
07007
> align-items属性适用于所有Flex容器,并设置Flex项目沿每条柔性线的交叉轴的默认对齐方式. align-self适用于所有弹性项目,允许为各个弹性项目覆盖此默认对齐方式.
070010
> align-content属性仅适用于多线柔性容器,并且当横轴中有额外空间时,将柔性容器内的柔性线对齐.
070012
在这里你有一个片段可以玩：
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>
