使用flex布局和媒体查询,当屏幕较小时,让中间独占一行
技巧就在于在指定屏幕范围时,让需要独占一行的元素的width:100%;flex:1 1 100%;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
.content{
width: 100%;
height: 100%;
border: 1px red solid;
display: flex;
flex-direction: row;
justify-content:space-between;
align-items: center;
flex-wrap: wrap;
gap: 10px;
}
.left{
width: 20px;
height: 20px;
background-color: blue;
flex: 1 1 auto;
}
.middle{
width: 20px;
height: 20px;
background-color: red;
flex: 1 1 60%;
}
.right{
width: 20px;
height: 20px;
background-color: rgb(129, 129, 105);
flex: 1 1 auto;
}
@media only screen and (max-width: 600px) {
.middle {
width: 100%;
flex: 1 1 100%;
}
}
</style>
<body>
<div class="content">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
</body>
</html>
版权声明:
作者:kukey-admin
链接:https://kuyour.top/?p=224
来源:KuKey
文章版权归作者所有,未经允许请勿转载。
THE END
0
二维码
打赏
海报


使用flex布局和媒体查询,当屏幕较小时,让中间独占一行
技巧就在于在指定屏幕范围时,让需要独占一行的元素的width:100%;flex:1 1 100%;
<!DOCTYPE html>
<html lang="en">
<head>
<m……

共有 0 条评论