使用align-items:flex-start和align-content:center的Flexbox [英] Flexbox using align-items: flex-start together with align-content: center

问题描述

美好的一天.

我正在尝试使用flex box在一个flex容器中强制执行以下行为，该容器在横轴上包含多余的空间:

I'm trying to use flex box to enforce the following behavior in a flex container which contains excess space on the cross-axis:

1. 如果所有的弹性项目都排成一排，则它们应在横轴的顶部对齐；但是
2. 包裹它们后，柔性物品应在横轴中心冷凝.

为此，我已经尝试在 https://jsfiddle.net/ht5bue6s/处进行以下标记a>

To do this, I've tried the following markup at 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>

您将看到，弹性项目始终会凝聚在中心.即，对齐内容:中心"指的是对齐内容:居中".即使弹性项目没有包装，也总是应用.

As you'll see, the flex items always condense to the center. That is, "align-content: center" is always applied even when the flex items do not wrap.

我已经阅读了MDN的报价，要使align-content起作用，您在flex容器中需要的高度要比显示项目所需的高度高.然后，它将所有项目作为一个集合进行处理，并指示该可用空间会发生什么情况，以及其中的整个项目集合的对齐方式".

I've read the MDN quote, "For align-content to work you need more height in your flex container than is required to display the items. It then works on all the items as a set, and dictates what happens with that free space, and the alignment of the entire set of items within it".

那样，如果flex容器中的横轴上有多余的空间，则您根本无法在align-content旁边应用align-items.相反，align-content将始终覆盖align-items.

With that, it seems that if there is excess space on the cross axis within the flex container, that you simply cannot apply align-items alongside align-content. Instead, align-content will always override align-items.

所以我的问题是:是否存在容器或项目CSS属性的任意组合，这些属性会产生上述#1和#2要求中所述的行为?

So my question: is there any combination of container or item CSS properties which will produce the behavior described in #1 and #2 requirements above?

谢谢.

推荐答案

要获得所需的结果，可以使用媒体查询.

To achieve the desired result, you can make use of a media query.

要执行此操作，请从 .flex-container 元素中删除 flex-wrap 和 align-content 属性.我们将只在浏览器窗口的特定宽度上将这些属性添加到 .flex-container 元素上.

To make this work, remove the flex-wrap and align-content properties from the .flex-container element. We will nly add these properties on the .flex-container element at a particular width of the browser window.

例如，在媒体查询之后

@media (max-width: 450px) {
  .flex-container {
    flex-wrap: wrap;
    align-content: center;
  }
}

当浏览器窗口的宽度等于或小于 450px 时，

将使flex容器成为多行flex容器.我们还添加了 align-content:center ，以确保弹性线在flex容器的中心对齐.

will make a flex container a multi-line flex container when the width of the browser window equal to or smaller than 450px. We also add align-content: center to make sure that the flex-lines are aligned in the center of the flex container.

这确保了对于大于 450px 的宽度，flex容器仅具有一条flex-line，并且flex项目在该单个flex-line的开始处对齐.对于小于或等于 450px 的宽度，我们将flex容器设置为多行flex容器，并使用 align-content:center将这些flex-line对齐到flex容器的中心.

This ensures that for a width greater than 450px, flex container has only one flex-line and flex items are aligned at the start of that single flex-line. For a width smaller than or equal to 450px, we make the flex container a multi-line flex container and align those flex-lines at the center of the flex container using 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>

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