再会。
我正在尝试使用 Flex 框在横轴上包含多余空间的 Flex 容器中强制执行以下行为：
- 如果所有弹性项目都适合一行，那么它们应该在横轴的顶部对齐；但
- 一旦它们包裹起来，柔性项目应该凝结在横轴的中心。
为此，我尝试了以下标记https://jsfiddle.net/ht5bue6s/ https://jsfiddle.net/ht5bue6s/
* {
box-sizing: border-box;
font-size: 1.5rem;
}
html {
background: #b3b3b3;
padding: 5px;
}
body {
background: #b3b3b3;
padding: 5px;
margin: 0;
}
.flex-container {
height: 500px;
background: white;
padding: 10px;
border: 5px solid black;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: flex-start;
align-content: center;
}
.item-1 {
background: #ff7300;
color: white;
padding: 10px;
border: 5px solid black;
margin: 10px;
}
.item-2 {
background: #ff9640;
color: white;
padding: 10px;
border: 5px solid black;
margin: 10px;
}
.item-3 {
background: #ff9640;
color: white;
padding: 10px;
border: 5px solid black;
margin: 10px;
}
.item-4 {
background: #f5c096;
color: white;
padding: 10px;
border: 5px solid black;
margin: 10px;
}
.item-5 {
background: #d3c0b1;
color: white;
padding: 10px;
border: 5px solid black;
margin: 10px;
}
.item-6 {
background: #d3c0b1;
color: white;
padding: 10px;
border: 5px solid black;
margin: 10px;
}
<div class="flex-container">
<div class="item-1">1</div>
<div class="item-2">2</div>
<div class="item-3">3</div>
<div class="item-4">4</div>
<div class="item-5">5</div>
<div class="item-6">6</div>
</div>
正如您将看到的，弹性项目总是压缩到中心。也就是说，即使 Flex 项目不换行，也始终应用“align-content: center”。
我读过 MDN 引用，“要使对齐内容正常工作，您的 Flex 容器中需要比显示项目所需的高度更高的高度。然后它会作为一组对所有项目起作用，并且决定了该自由空间会发生什么，以及其中整组项目的对齐方式”。
这样看来，如果 Flex 容器内的横轴上有多余的空间，您就无法将align-items 与align-content 一起应用。相反，align-content 将始终覆盖align-items。
所以我的问题是：是否有任何容器或项目 CSS 属性的组合可以产生上面#1 和#2 要求中描述的行为？
谢谢。
为了获得所需的结果，您可以使用媒体查询。
要使其工作，请删除flex-wrap and align-content属性来自.flex-container元素。我们只会将这些属性添加到.flex-container浏览器窗口特定宽度的元素。
例如，以下媒体查询
@media (max-width: 450px) {
.flex-container {
flex-wrap: wrap;
align-content: center;
}
}
当浏览器窗口的宽度等于或小于时，将使 Flex 容器成为多行 Flex 容器450px。我们还添加align-content: center确保弹性线在弹性容器的中心对齐。
这确保了宽度大于450px，Flex 容器只有一个 Flex 行，并且 Flex 项目在该单个 Flex 行的开头对齐。对于宽度小于或等于450px，我们使 Flex 容器成为多行 Flex 容器，并使用以下命令将这些 Flex 线对齐在 Flex 容器的中心align-content: center.
工作演示
* {
box-sizing: border-box;
font-size: 1.5rem;
}
html {
background: #b3b3b3;
padding: 5px;
}
body {
background: #b3b3b3;
padding: 5px;
margin: 0;
}
.flex-container {
height: 500px;
background: white;
padding: 10px;
border: 5px solid black;
display: flex;
justify-content: space-evenly;
align-items: flex-start;
}
.flex-container div {
color: white;
padding: 10px;
border: 5px solid black;
margin: 10px;
}
.item-1 { background: #ff7300; }
.item-2 { background: #ff9640; }
.item-3 { background: #ff9640; }
.item-4 { background: #f5c096; }
.item-5 { background: #d3c0b1; }
.item-6 { background: #d3c0b1; }
@media (max-width: 450px) {
.flex-container {
flex-wrap: wrap;
align-content: center;
}
}
<div class="flex-container">
<div class="item-1">1</div>
<div class="item-2">2</div>
<div class="item-3">3</div>
<div class="item-4">4</div>
<div class="item-5">5</div>
<div class="item-6">6</div>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
