2019-04-01常见布局汇总（flex版本）
2019-04-02 本文已影响6人
itsmyturn
1,左侧固定中间自适应
<html >
<head>
<meta charset="UTF-8">
<title>左侧固定右侧自适应</title>
</head>
<style type="text/css">
*{
margin:0;
padding: 0;
}
html,body{
height:100%;
}
#outer{
display: flex;
width: 100%;
flex-flow: row nowrap;
}
.left{
width:200px;
height:50px;
background: red;
}
.right{
flex-grow: 1;
background: yellow;
}
</style>
<body>
<div id="outer">
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
左侧固定右侧自适应
2，右侧固定，左侧自适应
<html >
<head>
<meta charset="UTF-8">
<title>右侧固定左侧自适应</title>
</head>
<style type="text/css">
*{
margin:0;
padding: 0;
}
html,body{
height:100%;
}
#outer{
display: flex;
width: 100%;
flex-flow: row nowrap;
}
.right{
width:200px;
height:50px;
background: red;
}
.left{
flex-grow: 1;
background: yellow;
}
</style>
<body>
<div id="outer">
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
右侧固定左侧自适应
3，两边固定中间自适应
<html >
<head>
<meta charset="UTF-8">
<title>双飞翼布局</title>
</head>
<style type="text/css">
*{
margin:0;
padding: 0;
}
html,body{
height:100%;
}
#outer{
display: flex;
width: 100%;
flex-flow: row nowrap;
}
.left,.right{
width:200px;
height:50px;
background: red;
}
.middle{
flex-grow: 1;
background: yellow;
}
</style>
<body>
<div id="outer">
<div class="left">left</div>
<div class="middle">middle</div>
<div class="right">right</div>
</div>
</body>
</html>
两边固定中间自适应
4,等高布局
<html >
<head>
<meta charset="UTF-8">
<title>等高布局</title>
</head>
<style type="text/css">
*{
margin:0;
padding: 0;
}
.outer{
display: flex;
}
.outer >div{
flex:1;
}
.left,.right{
background: yellow;
}
.middle{
background: red;
}
</style>
<body>
<div class="outer">
<div class="left">弹性布局（Flexbox）逐渐流行，越来越多人使用，因为它写 CSS 布局真是太方便了弹性布局（Flexbox）逐渐流行，越来越多人使用，因为它写 CSS 布局真是太方便了弹性布局（Flexbox）逐渐流行，越来越多人使用，因为它写 CSS 布局真是太方便了弹性布局（Flexbox）逐渐流行，越来越多人使用，因为它写 CSS 布局真是太方便了</div>
<div class="middle">middle</div>
<div class="right">弹性布局（Flexbox）逐渐流行，越来越多人使用，因为它写 CSS 布局真是太方便了弹性布局（Flexbox）逐渐流行，越来越多人使用，因为它写 CSS 布局真是太方便了弹性布局（Flexbox）逐渐流行，越来越多人使用，因为它写 CSS 布局真是太方便了弹性布局（Flexbox）逐渐流行，越来越多人使用，因为它写 CSS 布局真是太方便了弹性布局（Flexbox）逐渐流行，越来越多人使用，因为它写 CSS 布局真是太方便了弹性布局（Flexbox）逐渐流行，越来越多人使用，因为它写 CSS 布局真是太方便了</div>
</div>
</body>
</html>
等高布局
