无法使用flexbox对齐项目[重复]
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了无法使用flexbox对齐项目[重复]相关的知识，希望对你有一定的参考价值。
enter code hereI无法真正解释它比这个代码示例更好。
https://codepen.io/anon/pen/BYeger
我想让#thing_down_here触摸#thing_up_here，但我无法弄清楚正确的组合。
html, body {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box
}
#parent {
width: 100vw;
height: 100vh;
background: cornsilk;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
#thing_up_here {
flex: 1 0 100%;
background: skyblue;
height: 80px;
}
#thing_down_here {
flex: 0 0 50%;
background: lightgreen;
height: 100px;
}<div id="parent">
<div id="thing_up_here"></div>
<div id="thing_down_here"></div>
</div>答案
您需要使用align-content属性来设置沿交叉轴的分布。
html, body {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box
}
#parent {
width: 100vw;
height: 100vh;
background: cornsilk;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: flex-start;
}
#thing_up_here {
flex: 1 0 100%;
background: skyblue;
height: 80px;
}
#thing_down_here {
flex: 0 0 50%;
background: lightgreen;
height: 100px;
}<div id="parent">
<div id="thing_up_here"></div>
<div id="thing_down_here"></div>
</div>另一答案
将align-content: flex-start添加到#parent
这定义了如何沿当前行的横轴布置弹性项目的默认行为。可以将其视为横轴（垂直于主轴）的对齐内容版本。
flex-start：项目的交叉开始边缘边缘放置在交叉起始线上
默认值为stretch，导致您的问题
更多关于https://css-tricks.com/snippets/css/a-guide-to-flexbox/的信息
html, body {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box
}
#parent {
width: 100vw;
height: 100vh;
background: cornsilk;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: flex-start;
}
#thing_up_here {
flex: 1 0 100%;
background: skyblue;
height: 80px;
}
#thing_down_here {
flex: 0 0 50%;
background: lightgreen;
height: 100px;
}<div id="parent">
<div id="thing_up_here"></div>
<div id="thing_down_here"></div>
</div>以上是关于无法使用flexbox对齐项目[重复]的主要内容，如果未能解决你的问题，请参考以下文章
CSS Flexbox：对齐项目和对齐内容之间的区别[重复]
将一个项目居中对齐，其他项目与 Flexbox 对齐 [重复]