经典布局（flex和传统两种实现）—左中右三栏式

朴灿烈づ我的快乐病毒、 2022-01-10 15:11 606阅读 0赞

### 1.浮动法 ###

> 父级宽度：80%
> 
> 左右： 定宽高, 分别浮动向左，浮动向右
> 
> 中: margin: 0 200px; 定高
> 
> 注意，中间的块元素必须放在后面
> 
> 左右定宽，中间自适应

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .wrap{
              width: 80%;
              margin: 0 auto;
            }
            #left{
              background: #ccffff;
              float: left;
              width: 200px;
              height: 500px;
            }
            #right{
              background: #ccffff;
              float: right;
              width: 200px;
              height: 500px;
            }
            #main{
              background: #ffcccc;
              margin:0 200px;
              height: 500px;
            }
        </style>
    </head>
    <body>
    
    <div class="wrap">
        <aside id="left"></aside>
        <aside id="right"></aside>
        <section id="main"></section>
    </div>
    
    </body>
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70][]

### 2.flex法 ###

>  父级：宽度百分比。定高，flex布局
> 
> 左右： flex：0 0 200px;
> 
> 中： flex：1

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .wrap{
              margin: 0 auto;
              width: 80%;
              height: 500px;
              display: flex;
            }
            #left{
              background: #ccffff;
              flex: 0 0 200px;
            }
            #right{
              background: #ccffff;
              flex: 0 0 100px;
            }
            #main{
              background: #ffcccc;
              flex: 1;
            }
        </style>
    </head>
    <body>
    
    <div class="wrap">
        <aside id="left"></aside>
        <section id="main"></section>
        <aside id="right"></aside>
    </div>
    
    </body>
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 1][]

### 3.双飞翼布局 ###

其实也就是左中右三栏式

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .wrap{
                margin:0 auto;
                width:80%
            }
            #main{
                width:100%;
                float: left;
                background: #ffcccc;
            }
            #left{
                width:200px;
                float: left;
                height:500px;
                background: #ccffff;
                margin-left: -100%;
            }
            #right{
                width:200px;
                float: left;
                height:500px;
                background: #ccffff;
                margin-left:-200px;
            }
            .content{
                height:500px;
                margin:0 200px;
            }
        </style>
    </head>
    <body>
    
    <div class="wrap">
        <section id="main">
            <div class="content">#content</div>
        </section>
        <aside id="left">#left</aside>
        <aside id="right">#right</aside>
    </div>
    
    </body>
    </html>

题外话，这也是我遇到的一个面试题，上下定高，中间自适应怎么做

vw和vh是相对于视口（viewport，也可以叫做视区、视界或可视范围）的宽度和高度。1vw等于视口宽度（viewport width）的百分之一，**也就是说100vw就是视口的宽度**。同理，1vh等于视口高度（viewport height）的百分之一。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .wrap{
              margin: 0 auto;
              width: 80%;
              height: 100vh; //重点
              display: flex;
              flex-direction: column;
            }
            #left{
              background: #ccffff;
              flex: 0 0 100px;
            }
            #right{
              background: #ccffff;
              flex: 0 0 100px;
            }
            #main{
              background: #ffcccc;
              flex: 1;
            }
        </style>
    </head>
    <body>
    
    <div class="wrap">
        <aside id="left"></aside>
        <section id="main"></section>
        <aside id="right"></aside>
    </div>
    
    </body>
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 2][]

上面虽然实现了需求，但是假如让上下的位置保持不变，怎么弄 ？

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70]: /images/20220110/d575ae2afcbb49609bd00435783541cf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 1]: /images/20220110/e339050cb6b54ff4858fa37c35908819.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 2]: /images/20220110/80da6151abef46a3a175c68a711a85e9.png