如何在flexbox中的另一个div下面获取一个div答案

【问题标题】：How to get a div underneath another div in flexbox如何在flexbox中的另一个div下面获取一个div
【发布时间】：2020-01-24 23:06:35
【问题描述】：

对于一个用 flexbox 设计的主页，很遗憾，我遇到了一个我无法用 CSS 解决的问题。我也想知道它是否仅在 CSS 中是可行的。如果没有，那我需要在 JS 中找到解决方案。

该网站首先是移动设备。在 flex 容器中有一个 H2 元素，3 个 div：.intro、.image 和 .text。在 .text 中有段落和一个按钮。

在移动设备和平板电脑查询中一切正常，除了 .text div 应该位于 .intro div 下方的桌面版本，它们都位于 .image div 的右侧。左右都应该是 50%。这是代码：

<!DOCTYPE html>
<html>
<head>
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;  
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    font-weight: bold;
    text-align: center;
}

.flex-container > * {
    padding: 10px;
    flex: 1 100%;
}

.text {
    text-align: left;
    background: cornflowerblue;
}

.intro {
    background: yellow;
}

.image {
    background: moccasin;
    height: 200px;
}

@media all and (min-width: 600px) {
    .image { flex: 1 0px; }
    .text    { flex: 1 0px; }
    .image { order: 1; } 
    .text    { order: 2; }
}

@media all and (min-width: 769px) {
    .flex-container :not(.image){
    -webkit-flex-flow: column nowrap;
    flex-flow: column nowrap;
}
    .intro { flex: 1 50%; }
    .image { flex: 12 0px; }
    .text    { flex: 1 50%; }
    .image { order: 1; }
    .intro { order: 2; }
    .text    { order: 3; }
}
</style>
</head>
<body>
    <h2>Title</h2>
    <div class="flex-container">
        <div class="intro">
            <p>Intro: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed ex turpis.</p>
        </div>
    <div class="image">Image</div>
        <div class="text">
            <p>Text: Cras luctus nibh lectus, in ullamcorper ex tempor eleifend. Nulla bibendum, eros a consequat vestibulum, orci massa fermentum quam, sed commodo nunc ex vitae nisl.</p>
            <button>click me</button>
        </div>
    </div>
</body>
</html>

它应该是这样的： how the desktop media query should look like

【问题讨论】：

flex 可以做前 3 个，你期望的最后一个需要网格
太好了，确实有效。唯一的问题是 flexbox 更普遍。 Caniuse 仍然提到了一个很大的全球百分比。现在就可以了。非常感谢 G-Cyr！
尝试在桌面上使用flex-direction: column;
哦，我明白你在做什么了。是的，我会尝试使用 CSS 网格：developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids

标签： html css flexbox media-queries

【解决方案1】：

如果你对网格一无所知，你可以将它用于桌面布局：

.flex-container {
  font-weight: bold;
  text-align: center;
}

.flex-container>* {
  padding: 10px;
  flex: 1 100%;
}

.text {
  text-align: left;
  background: cornflowerblue;
}

.intro {
  background: yellow;
}

.image {
  background: moccasin;
  height: 200px;
}

@media all and (min-width: 600px) {
  .flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
  }
  .image {
    flex: 1 0px;
  }
  .text {
    flex: 1 0px;
  }
  .image {
    order: 1;
  }
  .text {
    order: 2;
  }
}

@media all and (min-width: 769px) {
  
  .flex-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .intro,
  .text {
    grid-column: 2;
  }
  .image {
    grid-row:1 / span 2
  }
}

<h2>Title</h2>
<div class="flex-container">
  <div class="intro">
    <p>Intro: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed ex turpis.</p>
  </div>
  <div class="image">Image</div>
  <div class="text">
    <p>Text: Cras luctus nibh lectus, in ullamcorper ex tempor eleifend. Nulla bibendum, eros a consequat vestibulum, orci massa fermentum quam, sed commodo nunc ex vitae nisl.</p>
    <button>click me</button>
  </div>
</div>

有用的链接：https://css-tricks.com/snippets/css/complete-guide-grid/

【讨论】：

我可以添加高度：自动；到最后一条规则？即 .image { grid-row:1 / span 2;高度：自动； }。在这种情况下，图像保持与右侧部分相同的高度。无论如何，这对我帮助很大。再次感谢！
如果不希望box图片变大，可以添加：margin-bottom:auto;它不会被拉伸到其单元格的底部。不确定我是否理解您的评论问题:)