Question

我已经设置了一个带有两个项目的弹箱，这些项目应该在普通屏幕的左侧和右侧。

如果屏幕不够大，无法显示彼此相邻，它应该换行，但是它们应该居中并且不会在左边对齐。

我尝试了不同的解决方案（比如在子项目上使用margin: auto），但即使在同一行中，它们也更多地与中心对齐。

这是一个简化的例子：

.container {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  justify-content: space-between;
  border: 1px solid black;
  margin-bottom: 25px;
}
.large {
  width: 500px;
}
.small {
  width: 175px;
}
.item {
  width: 100px;
  height: 100px;
  background-color: blue;
  margin: 25px 0px;
}

<div class="container large">
  <div class="item"></div>
  <div class="item"></div>
</div>

<div class="container small">
  <div class="item"></div>
  <div class="item"></div>
</div>

https://jsfiddle.net/SoWhy/zfx4ub8x/

第一个容器是预定的位置，第二个容器在较小的屏幕上模拟相同的容器，请注意左侧的对齐。

有没有办法定义flexbox在换行时是以不同的方式对齐项目，还是只能使用“@media screen”方法（这需要我设置一定的大小，因此如果大小不灵活）项目的变化）？

Answer 1

这可能对您的情况不起作用，但值得一提的是justify-content: space-between和justify-content: space-around之间鲜为人知的差异。

来自flexbox规范：

8.2. Axis Alignment: the justify-content property

justify-content属性沿主轴对齐弹性项目   Flex容器的当前行。

有五个适用于justify-content的值。以下是其中两个：

<强> space-between

Flex项目均匀分布在该行中。

如果剩余的可用空间为负数，或者该行上只有一个弹性项目，则此值与flex-start相同。

这解释了为什么您的商品与space-between包装在一起。

现在看看space-around：

<强> space-around

Flex项目均匀分布在行中，具有半角空格   在任何一端。

如果剩余的可用空间为负数，或者该行上只有一个弹性项目，则此值与center相同。

因此，要将flex项目居中对齐，请考虑使用space-around。

＆＃13;

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around; /* ADJUSTMENT */
  border: 1px solid black;
}
.item {
  width: 200px;
  height: 100px;
  background-color: blue;
  margin: 25px;
}

＆＃13;

<div class="container">
    <div class="item"></div>
    <div class="item"></div>
</div>

＆＃13;

Revised Fiddle

Answer 2

注意：您必须使用不同宽度的媒体查询。

无法检测何时使用css3进行包装。

如果您想将项目集中在display:inline-flex和justify-content: center;集中到容器，margin: 0 auto;集中到课程item

.container {
  display: flex;
  align-items: flex-end; 
  flex-wrap: nowrap;
  justify-content: space-between;
  border: 1px solid black;
  margin-bottom: 25px;
}
.item {
  width: 100px;
  height: 100px;
  background-color: blue;
  margin: 25px;
  margin: 0 auto;
}

当容器大小小于200px时它会包装。

Click to see center aligned example in JsFiddle

如果您想将项目保持在一行flex-wrap: nowrap - 强制Flex项目被强制保留在一行中。

因此.container的样式将如下所示。

.container {
  display: flex;
  align-items: flex-end; 
  flex-wrap: nowrap;
  justify-content: space-between;
  border: 1px solid black;
  margin-bottom: 25px;
}

Click to see items forced to stay single line in JsFiddle

包裹

2 个答案: