html - 如何在 flexbox 中将一个 div 放在另一个 div 的下面-6ren

html - 如何在 flexbox 中将一个 div 放在另一个 div 的下面

转载作者：太空宇宙更新时间：2023-11-04 05:53:07

不幸的是，对于一个用 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-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/

关于html - 如何在 flexbox 中将一个 div 放在另一个 div 的下面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58086821/