flex和傳統(tǒng)方式實(shí)現(xiàn)左右兩欄式

發(fā)布時(shí)間：2023-09-26 15:32:53 作者：前端不加班

本文主要介紹了flex和傳統(tǒng)方式實(shí)現(xiàn)左右兩欄式，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

1.混合浮動(dòng)+普通流

混合浮動(dòng)+普通流
父級(jí)：寬度固定
left:寬度固定。浮動(dòng)起來
right:寬度和父級(jí)一樣，設(shè)定margin-right:left的寬度px,寬度隨父級(jí)變化而變化（固定+自適應(yīng)）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .wrap{
            margin:0 auto;
            width:80%;
        }
        #left{
            width:200px;
            height:500px;
            background: #ccffff;
            float: left;
        }
        #right{
            height: 500px;
            background: #ffcccc;
            margin-left:200px;
        }
    </style>
    <!--
        混合浮動(dòng)+普通流
    -->
</head>
<body>
<div class="wrap">
    <aside id="left"></aside>
    <section id="right"></section>
</div>
</body>
</html>

效果

2.flex方式

父級(jí)：display:flex
left:flex : 0 0 200px(固定200px,不放大也不縮小)
right:flex:1(會(huì)隨父級(jí)變化)
（固定+自適應(yīng)）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 參考阮一峰里面的百分比布局，要實(shí)現(xiàn)和上面一樣的效果（一側(cè)固定，一側(cè)隨父級(jí)進(jìn)行變化） -->
    <!-- flex: 1 =? 1 1 0%
    flex: auto => 1 1 auto
    flex: none => 0 0 auto;
    flex-basis優(yōu)先級(jí) 自身設(shè)定 > 0%(flex:1按字體的高度) > auto(采用height) -->
    <style>
      .wrap {
        margin: 0 auto;
        width: 80%;
        display: flex;
      }
      #left {
        flex: 0 0 200px; /* 左側(cè)固定200px */
        height: 500px;
        background: red;
      }
      #right {
        /* 此處解釋下
        flex: 1 1 0%
        0%表示此處寬度是按照自身內(nèi)容寬度來，此處自身內(nèi)容寬度為0，但是分配剩余的空間，所以可以自適應(yīng)變化
         */
        flex: 1; /* 隨父級(jí)變化 */
        height: 500px;
        background: burlywood;
      }
    </style>
</head>
<body>
<div class="wrap">
  <aside id="left"></aside>
  <section id="right">5555</section>
</div>
</body>
</html>

下來我們討論一下其他的

上面flex的代碼，當(dāng)我們把他的主軸方向變了之后

會(huì)發(fā)現(xiàn)right的高度是由內(nèi)容撐開的 (因?yàn)榘炎煮w去掉發(fā)現(xiàn)這塊消失)

注意：
也就是說，當(dāng)主軸方向是row的情況下，左邊設(shè)置寬度，右邊f(xié)lex:1。右邊寬度為總的寬度-左邊寬度

當(dāng)主軸方向?yàn)?column時(shí)，上面設(shè)置高度，寬度和父級(jí)一直，下邊f(xié)lex:1。下面設(shè)置高度無效，由內(nèi)容決定.

3.純浮動(dòng)

父級(jí)：定寬，清浮動(dòng)(overflow:hidden)
left,right:定寬，定高，float:left
兩邊都固定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      .wrap {
        margin: 0 auto;
        width: 900px;
        /* 清浮動(dòng) */
        overflow: hidden; 
      }
      #left {
        width: 200px;
        height: 500px;
        background: red;
        float: left;
      }
      #right {
        width: 700px;
        height: 500px;
        background: burlywood;
        float: left;
      }
    </style>
    <!--
        純浮動(dòng)
    -->
</head>
<body>
<div class="wrap">
  <aside id="left"></aside>
  <section id="right"></section>
</div>
</body>
</html>

4.定位法

父級(jí)：定寬，position：relative

left：定寬高： position: absolute top: 0 left: 0

right: 定寬高： position: absolute top: 0 right 0

兩邊都固定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      .wrap {
        margin: 0 auto;
        width: 900px;
        position: relative;
      }
      #left {
        width: 200px;
        height: 500px;
        background: red;
        position: absolute;
        top: 0;
        left: 0;
      }
      #right {
        width: 700px;
        height: 500px;
        background: burlywood;
        position: absolute;
        top: 0;
        right: 0; 
      }
    </style>
    <!--
        定位
    -->
</head>
<body>
<div class="wrap">
  <aside id="left"></aside>
  <section id="right"></section>
</div>
</body>
</html>