2019-04-01常见布局汇总（flex版本）

作者: itsmyturn | 来源:发表于2019-04-02 11:06 被阅读6次

2019-04-01常见布局汇总（flex版本）
css---flex兼容性布局
flex布局常用汇总
CSS系列篇：布局
【前端】flex布局
css
前端开发-常见CSS布局
CSS——Flex 弹性布局
Flex网页布局二CSS弹性伸缩盒子写法教程
前端浏览器适配

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>

等高布局