在单独的容器中制作两个div始终对齐

Question

我有两个DIV，它们在行包装的弹性框中。 所以我有两个按钮，我想要始终对齐。

＆＃13;

＆＃13;

.main-container {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}
.container {
  flex: 1;
  
  flex-flow: column wrap;
  justify-content: center;
  border: 1px solid gray;
  border-radius: 5px;
  margin: 5px;
  padding: 5px;
  min-width: 300px;
}
.container> * {
  flex: 1;
}
button {
  width: 100%;
}

＆＃13;

<div class="main-container">


  <div class="container">
    <h2>
        Container 1
    </h2>
    <div class="inner-container">
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
    </div>
    <button>
      Click me
    </button>
  </div>
  <div class="container">
    <h2>
        Container 2
    </h2>
    <div class="inner-container">
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test and this is a long text to wrap around. So let it be</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
    </div>
    <button>
      Click me
    </button>
    <div class="more-container">
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

在移动分辨率中，它应该看起来像

在较小的分辨率中它应该看起来像

在桌面上

JSFIDDLE：https://jsfiddle.net/d69jcpnz/

Answer 1

试试那个兄弟

.main-container {
  display: flex;
  flex-flow: row nowrap; /*modification here*/
  justify-content: center;
}
.container {
  flex: 1;
  
  flex-flow: column wrap;
  justify-content: center;
  border: 1px solid gray;
  border-radius: 5px;
  margin: 5px;
  padding: 5px;
  min-width: 300px;
}
.container> * {
  flex: 1;
}
button {
  width: 100%;
}


/*add here*/
@media screen and (max-width: 660px) {
  .main-container {
    flex-flow: row wrap;
  }
}

Answer 2

好吧，兄弟，我不理解你的目标，试试这个：

.main-container {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}
.container {
  flex: 1;
  flex-flow: column wrap;
  justify-content: center;
  border: 1px solid gray;
  border-radius: 5px;
  margin: 5px;
  padding: 5px;
  min-width: 300px;
}
.container> * {
  flex: 1;
}
button {
  position: relative; /* position changed */
  width: 100%;
}
button.first { /* added style here */
  top: 5.65rem;
}

<div class="main-container">


  <div class="container">
    <h2>
        Container 1
    </h2>
    <div class="inner-container">
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
    </div>
    <button class="first"> <!-- added class here -->
      Click me
    </button>
  </div>
  <div class="container">
    <h2>
        Container 2
    </h2>
    <div class="inner-container">
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test and this is a long text to wrap around. So let it be</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
    </div>
    <button>
      Click me
    </button>
    <div class="more-container">
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
    </div>
  </div>
</div>

结果类似于您想要的结果。

就是这样吗？