您的位置:首页 > 其它

Flex布局实现圣杯布局和网格布局

2017-09-25 23:13 561 查看
河狸家技术面,实现类似圣杯布局,flex有点忘记了,现在回顾下,圣杯布局自己百度~

<!DOCTYPE html>
<html>
<head>
<title>flex布局回顾</title>
<style type="text/css">
.container{
display: flex;
flex-direction:column;
min-height: 100vh;
}
.contents{
display: flex;
flex-direction:row;
flex:1;
}
.header,.footer{
min-height: 20vh;
}
.nav{
order:-1;
}
.nav,.ads{
min-width: 30vh;
}
.content{
flex:1;
}
</style>
</head>
<body>
<div class="container">
<div class="header">1</div>
<div class="contents">
<div class="content">3</div>
<div class="ads">4</div>
<div class="nav">2</div>
</div>
<div class="footer">5</div>
</div>
</body>
</html>

order: 默认为0,数值越小,排名越靠前

<!DOCTYPE html>
<html>

<head>
<title>flex布局实现基本网络布局</title>
<style type="text/css">
.container{
display: flex;
flex-wrap: wrap;

}
.item{
flex:0 1 25%;
}
</style>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
</body>
</html>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: