Flex布局详解（三）
2020-11-10 本文已影响0人
飞天小猪_pig
3、flex布局的应用实例
（1）、手机页面布局
HTML
<body>
<div class="container">
<header>header</header>
<main>
main
</main>
<footer>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</footer>
</div>
</body>
CSS
*{margin:0;padding:0;box-sizing:boder-box;}
ul{list-style:none}
.container{
height:100vh;
display:flex;
flex-direction:column;
}
header{
height:100px;
background:#ddd;
}
main{
flex-grow:1;
overflow:auto;
}
footer>ul{
height:100px;
background:#ddd;
display:flex;
}
footer>ul>li{
background:red;
width:25%;
height:100%;
border:1px solid black
}
6.png
（2）产品系列（ul>li*9）
HTML
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
CSS
*{
margin:0;padding:0;box-sizing:border-box;
}
ul{
list-style:none;
}
ul{
display:flex;
flex-wrap:wrap;
width:350px;
margin:auto;
border:1px solid black;
justify-content:space-between;
}
li{
width:100px;
height:100px;
background:#ddd;
border:1px solid red;
margin:10px 0;
}
7.png
（3）、PC页面布局
HTML
<body>
<header></header>
<div class="content">
<aside id=asidel></aside>
<main></main>
<nav></nav>
</div>
<footer></footer>
</body>
CSS
header{height:50px;background:#ddd;}
footer{height:50px;background:#ddd;}
.content{
display:flex;
}
.content>aside{
width:120px;
background:#444;
}
.content>main{
height:400px;
flex:1;
background:red;
}
.content>nav{
width:100px;
background:green;
}
8.png
（4）完美居中
HTML
<div class="parent">
<div class="child">1234</div>
</div>
CSS
.parent{
height:400px;
background:#ddd;
display:flex;
justify-content:center;
align-items:center;
}
.child{
border:1px solid red;
}
9.png
