html - 柔性 : how to right align an item which centers on wrap

Question

我想左对齐两个元素，并在有足够空间但居中换行时右对齐一个元素。

第一次包裹(太薄不适合合适的元素)

• 正确的元素应该转到下一行并居中
• 剩余部分保持左对齐

在第二个包装上(右边+中间的元素太薄而不适合)

• 所有三个元素都垂直堆叠并居中

---

尝试使用 justify-content 设置两层 flex:第一层使用 space-between，第二层使用 center。

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.subcontainer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.item {
  border: 1px solid black;
  height: 100px;
}

<div class="container">
  <div class="subcontainer">
    <div class="item">abc abc abc abc abc abc</div>
    <div class="item">def def def def def def</div>
  </div>
  <div class="item">right right right</div>
</div>

http://jsfiddle.net/b3z18rLn/9/

不幸的是，右边的元素没有在换行时居中，而是保持左对齐。

Answer 1

JSFiddle

---

您可以将第三个元素包装在另一个 Flexbox 容器中并使用媒体查询:

---

/* flex-wrap will put right-subcontainer on a new row when you 
   decrease the viewport's width.*/
.container {
    display: flex;
    flex-wrap: wrap;
}

/* flex-grow of 1 will enable this container to take up the
   entire row when the left and right subcontainers are 
   row by row. 
   
   flex-wrap is used to allow the second item to go onto a
   new row at smaller widths. */
.left-subcontainer {
    display: flex;
    flex-grow: 1;
    flex-wrap: wrap;
}

/* Again, flex-wrap is used to give the right subcontainer 
   the ability to take up the entire row.
   
   flex-end changes the items from positioning left-to-right
   to right-to-left.*/
.right-subcontainer {
    display: flex;
    flex-grow: 1;
    justify-content: flex-end;
}

.item {
    border: 1px solid black;
    width: 300px;
    height: 300px;
}

/* You will need to adjust the arguments for these media queries. 
   Also, if you do decide to use media queries for this approach,
   I would suggest reversing the CSS logic by having the CSS 
   selectors tackle mobile design first and use media queries 
   to tackle design at larger screen sizes. */
   
/* The first wrap/breakpoint is at this width. I am telling the 
   right container to be center-aligned at the first breakpoint. */
@media only screen and (max-width: 925px) {
  .right-subcontainer {
    justify-content: center;
  }
}

/* Then, I tell the left container to be center-aligned at the second
   breakpoint. */
@media only screen and (max-width: 1320px) {
  .left-subcontainer {
    justify-content: center;
  }
}

<div class="container">
    <div class="left-subcontainer">
      <div class="item">abc abc abc abc abc abc</div>
      <div class="item">def def def def def def</div>
    </div>

    <div class="right-subcontainer">
      <div class="item">right right right</div>
    </div>
</div>