如何使用flexbox根据设备宽度重新流动div？

Question

如何使用flexbox根据设备宽度重新流动div？

adr*_*nmc 8 html css flexbox

我试图根据设备宽度设置两种不同的布局,所以我更喜欢两者都有相同的HTML布局,只需在CSS中使用媒体查询.

在两台设备上,我都会有一个图像(由绿框表示),它始终位于屏幕的左上角.就在它旁边,标题div也总是在同一个地方.

最有问题的div是描述div.如果它在桌面上,则该div应该与标题对齐,但如果它在移动设备上,它应该独立于图片下面.

下面的图像是使用float生成的,但是使用float也不理想,因为如果描述div足够长,它最终会流向左边(在桌面上),这不是所需的外观.在桌面上,它应该始终是两个清晰的列,描述不应该最终在图像div下面流动.

我很欣赏有关如何使用flexbox执行此操作的任何指导,谢谢!

作为参考,这是我对float的尝试(注意我不想使用float):

<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
    float: left;
    width: 100px;
    height: 50px;
    margin: 10px;
    border: 3px solid #73AD21;
}

.div2a {
    border: 1px solid blue;
}

.div2b {
    border: 1px solid red;
}


.div3 {
    float: left;
    width: 100px;
    height: 50px;
    margin: 10px;
    border: 3px solid #73AD21;
}

.div4a {
    border: 1px solid blue;
}

.div4b {
    border: 1px solid red;
    clear: left;
}
</style>
</head>
<body>

<h2>On Desktop</h2>
<div class="div1">div1</div>
<div class="div2a">div2a - Title.</div>
<div class="div2b">div2b - Description.</div>

<br />

<h2>On Mobile</h2>
<div class="div3">div3</div>
<div class="div4a">div4a - Title.</div>
<div class="div4b">div4b - Description.</div>

</body>
</html>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Yul*_*nez 5

这将是一种可能的解决方案.请注意,您已在css代码中提供了图像的尺寸(绿色框).我基于这个代码.

这是Jsfiddle:

.div1 {
    position: absolute;
    width: 100px;
    height: 50px;
    margin: 10px;
    border: 3px solid #73AD21;
}

.div2a {
    border: 1px solid blue;
    padding-left: 120px;
}

.div2b {
    border: 1px solid red;
    padding-left: 120px;
}


.div3 {
    position: absolute;
    width: 100px;
    height: 50px;
    margin: 10px;
    border: 3px solid #73AD21;
}

.div4a {
    border: 1px solid blue;
    padding-left: 120px;
}

.div4b {
    margin-top:50px;
    border: 1px solid red;
}

Run Code Online (Sandbox Code Playgroud)

<h2>On Desktop</h2>
<div class="div1">div1</div>
<div class="div2a">div2a - Title.</div>
<div class="div2b">div2b - Description.</div>

<br />

<h2>On Mobile</h2>
<div class="div3">div3</div>
<div class="div4a">div4a - Title.</div>
<div class="div4b">div4b - Description.</div>

Run Code Online (Sandbox Code Playgroud)

Answer 2

Mic*_*l_B 4

#container {
  display: flex;
  flex-flow: column wrap;
  height: 300px;
  max-width: 100%;
  border: 1px dashed black;
}

.div1 {
  flex: 0 0 100%;
  text-align: center;
  background-color: lightyellow;
}

.div1 > img {
  width: 150px;
}

.div2a {
  width: calc(100% - 150px);
  background-color: aqua;
}

.div2b {
  width: calc(100% - 150px);
  background-color: lightpink;
}

@media ( max-width: 600px) {
  #container {
    flex-direction: row;
    height: auto;
  }
  .div1 {
    flex-basis: 150px;
  }
  .div2a {
    flex: 1;
  }
  .div2b {
    flex-basis: 100%;
  }
}

Run Code Online (Sandbox Code Playgroud)

<div id="container">
  <div class="div1"><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
  <div class="div2a">div2a - Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title </div>
  <div class="div2b">div2b - Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description
    Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description
    Description Description Description Description Description Description Description Description Description Description Description Description Description Description</div>
</div>

Run Code Online (Sandbox Code Playgroud)

归档时间：	8 年，8 月前
查看次数：	196 次
最近记录：	8 年，7 月前

如何使用flexbox根据设备宽度重新流动div？

jsFiddle