自适应flexbox不适用于三列
巴斯范迪克
目前，我在flexbox中有三列（Plunkr中的当前情况）。
当屏幕变小时，我想将第二列放在其他两列的顶部（Plunkr中的理想情况）。
我在https://plnkr.co/edit/ZznzRKHvhdISykHP7jNh创建了一个Plunkr
是否可以通过完全修改css来获得所需的情况？
的CSS
.row {
display: flex;
}
.item {
display: flex;
flex: 1;
height: 300px;
}
.item1 {
flex: 1;
background: orange;
}
.item2 {
flex: 2;
background: red;
}
.item3 {
flex: 1;
background: yellow;
}
的HTML
<p>Current situation</p>
<div class="row">
<div class="item item1">Foobar1</div>
<div class="item item2">Foobar2</div>
<div class="item item3">Foobar3</div>
</div>
<br>
<p>Desired situation with pure css</p>
<div class="row">
<div class="item item2">Foobar2</div>
</div>
<div class="row">
<div class="item item1">Foobar1</div>
<div class="item item3">Foobar3</div>
</div>
保利
一个简单的flex-wrap和order媒体查询的更改，以使第二个框在行顺序中排在第一位。
.row {
display: flex;
height: 300px;
flex-wrap: wrap;
}
.item {
order: 2;
flex: 1;
}
.item1 {
background: orange;
}
.item2 {
background: red;
flex:2;
}
.item3 {
background: yellow;
}
@media(max-width: 500px) {
.item2 {
flex: 100%;
order: 1;
}
}<div class="row">
<div class="item item1">Foobar1</div>
<div class="item item2">Foobar2</div>
<div class="item item3">Foobar3</div>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
编辑于
相关文章
TOP 榜单
- 1
Qt Creator Windows 10 - “使用 jom 而不是 nmake”不起作用
- 2
使用next.js时出现服务器错误，错误：找不到react-redux上下文值；请确保组件包装在<Provider>中
- 3
Swift 2.1-对单个单元格使用UITableView
- 4
SQL Server中的非确定性数据类型
- 5
如何避免每次重新编译所有文件？
- 6
Hashchange事件侦听器在将事件处理程序附加到事件之前进行侦听
- 7
在同一Pushwoosh应用程序上Pushwoosh多个捆绑ID
- 8
HttpClient中的角度变化检测
- 9
在 Avalonia 中是否有带有柱子的 TreeView 或类似的东西？
- 10
在Wagtail管理员中，如何禁用图像和文档的摘要项？
- 11
通过iwd从Linux系统上的命令行连接到wifi（适用于Linux的无线守护程序）
- 12
构建类似于Jarvis的本地语言应用程序
- 13
Camunda-根据分配的组过滤任务列表
- 14
如何了解DFT结果
- 15
Embers js中的更改侦听器上的组合框
- 16
ggplot：对齐多个分面图-所有大小不同的分面
- 17
使用分隔符将成对相邻的数组元素相互连接
- 18
PHP Curl PUT 在 curl_exec 处停止
- 19
您如何通过 Nativescript 中的 Fetch 发出发布请求？
- 20
错误：找不到存根。请确保已调用spring-cloud-contract：convert
- 21
应用发明者仅从列表中选择一个随机项一次
我来说两句