伸缩布局的伸缩比例

最新推荐文章于 2022-07-23 13:51:37 发布

ITzhongzi

最新推荐文章于 2022-07-23 13:51:37 发布

阅读量588

点赞数

CC 4.0 BY-SA版权

分类专栏：前端学习笔记

本文链接：https://blog.youkuaiyun.com/ITzhongzi/article/details/54890466

前端学习笔记专栏收录该内容

306 篇文章

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body{
background-color: #eee;
}
*{
margin:0;
padding: 0;
list-style: none;
}

section{
width: 1000px;
margin:10px auto;
}
ul{
background-color: #fff;
border: 1px solid red;

}
li{
width: 150px;
height: 150px;
background-color: pink;
margin:10px;

}

section:nth-child(1) ul{
/*设置伸缩布局*/
display:flex;
}

section:nth-child(1) ul li:nth-child(1){
/*比例*/
flex:1;
}
section:nth-child(1) ul li:nth-child(2){
flex:2;
}
section:nth-child(1) ul li:nth-child(3){
flex:1;
}

section:nth-child(2) ul{
/*设置伸缩布局*/
display:flex;
}

section:nth-child(2) ul li:nth-child(1){
/*比例*/
flex:1;
}
section:nth-child(2) ul li:nth-child(2){
/*flex:1;*/
}
section:nth-child(2) ul li:nth-child(3){
flex:1;
}

</style>
</head>
<body>
<section>
<h4>伸缩比例</h4>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</section>

<section>
<h4>伸缩比例</h4>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</section>

</body>
</html>