flex order
- 作者: 大大大大大大大鱼
- 来源: 51数据库
- 2020-09-28
css3 的display：flex可以实现。
demo：
html结构
<div class="flex-box">
<div class="col">
<p>左侧内容</p>
</div>
<div class="col">
<p>右侧内容</p><p>右侧内容</p>
</div>
</div>
样式
<style>
.flex-box {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
overflow: hidden;
color:white;
}
.flex-box>.col{
flex: 1;
padding: 20px;
}
.flex-box>.col:first-child {
background: red;
-webkit-order: 1;
-ms-flex-order: 1;
order: 0;
}
.flex-box >.col:last-child {
background: black;
-webkit-order: 0;
-ms-flex-order: 0;
order: 1;
}
</style>
demo：
html结构
<div class="flex-box">
<div class="col">
<p>左侧内容</p>
</div>
<div class="col">
<p>右侧内容</p><p>右侧内容</p>
</div>
</div>
样式
<style>
.flex-box {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
overflow: hidden;
color:white;
}
.flex-box>.col{
flex: 1;
padding: 20px;
}
.flex-box>.col:first-child {
background: red;
-webkit-order: 1;
-ms-flex-order: 1;
order: 0;
}
.flex-box >.col:last-child {
background: black;
-webkit-order: 0;
-ms-flex-order: 0;
order: 1;
}
</style>
推荐阅读
