css - 使用 Flex - 将两个子 div 更改为以 100% 宽度相互堆叠

Question

我希望两个子 div 向左对齐并在 1000 像素的某个浏览器媒体宽度下彼此堆叠 100% 宽度。

我在父母中有两个正确显示的子 div：

.relationFRAME {
 background: #151515;
color: #FFF;
display: flex;
}

.relationLEFT {
width: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}

.relationRIGHT {
float: right;
flex: 1;
}

我希望两个子 div 向左对齐并在 1000 像素的某个浏览器媒体宽度下彼此堆叠 100% 宽度。

有人可以帮助我了解 CSS 中的更改来做到这一点吗？

Answer 1

@media您可以更改特定宽度的样式flex-direction: column;并将子元素堆叠在一起。这是一个例子：

.relationFRAME {
  background: #151515;
  display: flex;
}

.relationLEFT {
  background: green;
  flex: 1;
}

.relationRIGHT {
  background: orange;
  flex: 1;
}

@media only screen and (max-width: 1000px) {
  .relationFRAME {
    flex-direction: column;
  }
}

<div class="relationFRAME">
  <div class="relationLEFT">a</div>
  <div class="relationRIGHT">b</div>
</div>

Answer 2

您可以为子级设置最小宽度并允许在父级上换行：

.relationFRAME {
  background: #151515;
  display: flex;
  flex-wrap:wrap;/* will stack element if width becomes too small */
}

.relationFRAME > div {
flex:1;
min-width:580px;/* whatever value you want to set as a break point */


/* demo use only */
border:1px solid ;
color:white;
margin:2px;
padding:0.25em;


}

<div class="relationFRAME">
  <div class="relationLEFT"> Play me full page mode and resize window to check out my behavior </div>
  <div class="relationRIGHT">b</div>
</div>