css - 当 div 彼此流过时更改它们的对齐方式

Question

我想知道是否有一种纯 css 方法可以使 div 在彼此流过时改变对齐方式或在窗口调整大小时“换行”。一行上的两个 div，一个向左浮动，另一个向右浮动。在较小的视口(viewport)上，它们堆叠但保持左右对齐。我可以将它们集中在像这样的 fiddle 这样的媒体查询上:https://jsfiddle.net/vrac/gcuekarx/ , 但媒体查询并不理想，因为左框内容是可变长度的，因此为媒体查询设置断点只是一种猜测。干杯

HTML:

<div id="nav_row">
  <div id="left_box">Left box with variable content width xxxxxxxxxxxxx
  </div>
  <div id="right_box">Right box

  </div>
</div>

CSS:

#nav_row {
  background: blue;
  display: table;
  width: 100%;
  position: relative;
}

#left_box {
  background: red;
  display: block;
  float: left;
}

#right_box {
  background: green;
  display: block;
  text-align: right;
  float: right;
}

媒体查询:

@media (min-width: 250px) and (max-width: 400px) {
  #nav_row {
    background: yellow;
  }
  #left_box {
    background: purple;
    float: none;
    text-align: center;
  }
  #right_box {
    background: teal;
    float: none;
    text-align: center;
  }
}

Answer 1

在我看来，更改对齐方式最简单的方法是使用

FlexBox

使用 flex-wrap 可以很容易地改变 'wrap'。

你可以在这里看到更多https://css-tricks.com/snippets/css/a-guide-to-flexbox/