前端必須熟悉的幾種布局方式

前言

最近在准備整理基礎，准備跳槽，找個好一點的東家。😎 記錄學習整理的過程，希望能幫到年后跳槽的你，讓我們一起來鞏固基礎吧。
目前在一家國企單位，朝九晚五的生活讓我感到舒適，有大量的時間，做自己喜歡的事。時間久了，我感到了焦慮，由於公司是非互聯網，開發也是根據自己已知技術去開發，技術成長很慢，技術氛圍沒那么強，想突破一下自己， 是該逃離舒適區了。

本章主要是回顧Flex使用 和 一些常用布局的寫法。

熟悉HTML頁面架構和常用布局

Flex

Flex 概念

采用 Flex 布局的元素，稱為 Flex 容器（flex container），簡稱"容器"。它的所有子元素自動成為容器成員，稱為 Flex 項目（flex item），簡稱"項目"。

注意：

• 任何一個容器都可以指定為 Flex
• 行內元素也可以指定為 Flex 布局， display: inline-flex;
• Webkit 內核的瀏覽器，必須加上-webkit前綴。 display: -webkit-flex; / Safari /

容器默認存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點）叫做main start，結束位置叫做main end；交叉軸的開始位置叫做cross start，結束位置叫做cross end。

項目默認沿主軸排列。單個項目占據的主軸空間叫做main size，占據的交叉軸空間叫做cross size。

容器屬性

作用於父容器的屬性

屬性	功能描述
flex-direction	屬性決定主軸的方向（即項目的排列方向）。
flex-wrap	默認情況下，項目都排在一條線（又稱"軸線"）上。flex-wrap屬性定義，如果一條軸線排不下，如何換行
justify-content	決定了子元素在主軸的對齊方式。
align-items	決定了子元素在交叉軸(豎軸）的對齊方式
align-content	決定了多條軸線的對齊方式。

flex-direction

該屬性決定了主軸以什么方向排列

• row（默認值）：主軸為水平方向，起點在左端。
• row-reverse：主軸為水平方向，起點在右端。
• column：主軸為垂直方向，起點在上沿。
• column-reverse：主軸為垂直方向，起點在下沿。

flex-direction: column;

flex-direction:row-reverse

flex-direction: row-reverse;

flex-wrap

該屬性決定了元素是否在一條軸線上，通過指定它的屬性可以子元素換行。

• nowrap :默認，不換行。
• wrap: 讓子元素在一條線上有序的排列着，當一條線排不下的時候，會換行。
• wrap-reverse: wrap 的反轉。

flex-wrap: wrap;

flex-wrap: wrap-reverse;

justify-content

該屬性決定了 子元素 在主軸上的對齊方式

屬性：

• flex-start（默認值）：左對齊
• flex-end：右對齊
• center： 居中
• space-between：均勻排列每個元素,首個元素放置於起點末尾元素放置於終點. 間隔： 元素個數n - 1
• space-evenly :均勻排列每個元素,每個元素之間的間隔相等。 間隔：元素個數n + 1
• space-around：每個項目兩側的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍。

justify-content: center;

justify-content: flex-end;

justify-content: space-between;

justify-content: space-around;

 justify-content: space-evenly;

align-items

該屬性是讓子元素如何在交叉抽(豎軸)方向上對齊。

屬性：

• flex-start：交叉軸的起點對齊。
• flex-end：交叉軸的終點對齊。
• center：交叉軸的中點對齊。
• baseline: 項目的第一行文字的基線對齊。
• stretch（默認值）：如果項目未設置高度或設為auto，將占滿整個容器的高度。

align-items: flex-end;

align-items: center;

align-items: baseline;

align-items: stretch;

align-content

該元素定義了多條軸的對齊方式，當只有一根軸時，不起作用。

屬性：

• flex-start：與交叉軸的起點對齊。
• flex-end：與交叉軸的終點對齊。
• center：與交叉軸的中點對齊。
• space-between：與交叉軸兩端對齊，軸線之間的間隔平均分布。
• space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
• stretch（默認值）：軸線占滿整個交叉軸。

​

align-content: flex-start;

align-content: flex-end;

align-content: center;

align-content: space-between;

align-content: space-around;

作用於子元素的屬性

屬性	屬性描述
order	可以將子元素按大小排序，值越小，排名越靠前。
flex-grow	可以將子元素按一定比例排列，如果子元素值都一樣，那么子元素會等比例排列。
flex-shrink	如果空間不足時，可以使用它將子元素按比例縮小
flex-basis	它決定在主軸分配空間之前，項目占主軸的大小。瀏覽器會根據剩余的空間來，計算它的大小。
flex-self	它可以指定某個元素和其它元素的排列方式不同。

order

父容器為 flex. 時， 子元素可以通過 order 達到排序的功能，數值越小，排列最前面。

    <div class="main">
        <div class="son1">
            
        </div>
        <div class="son2">
            
        </div>
        <div class="son3">
            
        </div>
    </div>


<style>
.main{
    width: 400px;
    height: 300px;
    border-radius: 15px;
    display: flex;
    justify-items: center;
    align-items: center;
    background: lightseagreen;
    margin: auto;
    margin-top: 200px;
}
.son1{
    width: 80px;
    height: 100px;
    border-radius: 15px;
    margin: 10px;
    order: 1;
    background: coral;
}
.son2{
    width: 80px;
    height: 100px;
    border-radius: 15px;
    margin: 10px;
    order: 0.2;
    background: darkcyan;
}
.son3{
    width: 80px;
    height: 100px;
    border-radius: 15px;
    margin: 10px;
    order: 3;
    background: gold;
}
</style>

flex-grow

該屬性用來指定子元素在父容器中按比例指定大小，如果每一項都指定比例相同的話，那么元素會平分排列布局。

    <div class="main">
        <div class="son1">
            
        </div>
        <div class="son2">
            
        </div>
        <div class="son3">
            
        </div>
    </div>

<style>
    .main{
    width: 400px;
    height: 300px;
    border-radius: 15px;
    display: flex;
    justify-items: center;
    align-items: center;
    background: lightseagreen;
    margin: auto;
    margin-top: 200px;
}
.son1{
    height: 100px;
    border-radius: 15px;
    margin: 10px;
    flex-grow: 2;
    background: coral;
}
.son2{
    height: 100px;
    border-radius: 15px;
    margin: 10px;
    flex-grow: 2;
    background: darkcyan;
}
.son3{
    height: 100px;
    border-radius: 15px;
    margin: 10px;
    flex-grow: 2;
    background: gold;
}

</style>

flex-shrink

該屬性是按比例縮小子元素， 默認為1， 當主軸空間不足時，它會按比例縮小。

<style>
.main{
    width: 400px;
    height: 300px;
    border-radius: 15px;
    display: flex;
    justify-items: center;
    align-items: center;
    background: lightseagreen;
    margin: auto;
    margin-top: 200px;
}
.son1{
    width: 200px;
    height: 100px;
    border-radius: 15px;
    margin: 10px;
    /* 縮小5 的比例 */
    flex-shrink: 5; 
    background: coral;
}
.son2{
    width: 160px;
    height: 100px;
    border-radius: 15px;
    margin: 10px;
    background: darkcyan;
}
.son3{
    width: 160px;
    height: 100px;
    border-radius: 15px;
    margin: 10px;
    background: gold;
}
</style>

flex-basis

該屬性定義了在分配多余空間之前，項目占據的主軸空間。瀏覽器根據這個屬性，計算主軸是否有多余空間。它的默認值為auto，即項目的本來大小。

.son1{
    /* 指定了寬度沒有作用， flex-basis 決定了占據主軸多少寬度，
    瀏覽器會根據剩余寬度來計算主軸還有多少寬度 */
    width: 300px;
    height: 100px;
    border-radius: 15px;
    margin: 10px;
    flex-basis: 100px;
    background: coral;
}
.son2{
    width: 160px;
    height: 100px;
    border-radius: 15px;
    margin: 10px;
    background: darkcyan;
}
.son3{
    height: 100px;
    border-radius: 15px;
    margin: 10px;
    flex-basis: 100px;
    background: gold;
}

flex-self

該屬性允許單個 元素 和 其它 元素不同的排列方式，覆蓋父元素的 aligin-items

值：

• flex-start 左對齊
• flex-end 右對齊
• center 居中
• baseline 項目的第一行文字的基線對齊。
• stretch 如果項目未設置高度或設為auto，將占滿整個容器的高度。

.son3{
    border-radius: 15px;
    margin: 10px;
    flex-basis: 100px;
    background: gold;
    align-self: stretch;
}

常用布局

全屏布局

全局布局由 頂部，主體，底部 構成。通常一般固定 頂部 和 底部高度, 主體自適應 這樣就實現了全屏布局。

可以使用語義化標簽， header , main footer.

下面通過 Flex 布局來達到全屏布局的效果。

• 在最外層套一個容器，給容器 指定 display: flex;
• 在容器中指定子元素的排列方式， flex-direction: column;
• 頂部和底部高度，主體使用 flex : 1 比例來達到自適應。

flex 是 flex-grow、flex-shrink、flex-basis的縮寫

• flex-grow 屬性：定義項目的放大比例，默認為0，即如果存在剩余空間，也不放大。
• flex-shrink 屬性：定義了項目的縮小比例，默認為1，即如果空間不足，該項目將縮小。
• flex-basis 屬性：定義了在分配多余空間之前，項目占據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多余空間。它的默認值為auto，即項目的本來大小。

    <div class="full">
        <header>導航</header>
        <main>主體內容</main>
        <footer>底部</footer>
    </div>

*{
    margin: 0;
    padding: 0;
}
.full{
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
}
header{
    height: 60px;
    font-weight: 900;
    color: white;
    text-align: center;
    background: darkcyan;
}
main{
    flex: 1;
    align-items: center;
    font-weight: 900;
    color: white;
    text-align: center;
    background:orange;
}
footer{
    height: 60px;
    font-weight: 900;
    color: white;
    text-align: center;
    background: rgb(48, 40, 163);
}

兩列布局

最經典的系統管理布局 兩列布局 . 它主要由是 兩列都固定高度 ， 左端指定寬度,右端通過flex:1 來達到自適應寬度 。

    <div class="full">
        <div class="left">

        </div>
        <div class="right">

        </div>
    </div>

*{
    margin: 0;
    padding: 0;
}
.full{
    width: 100%;
    height: 100vh;
    display: flex;
    flex-wrap: wrap;
}
.left{
    width: 200px;
    height: 100vh;
    background: rgb(0, 140, 255);
}
.right{
    flex:1;
    height: 100vh;
    background: rgb(158, 159, 160); 
}

后台系統布局

我在寫后台時，布局頁面除了像 兩列布局 這種的，也會有這種布局，我叫它 后台系統布局 🤣。

它的特點： 它其實也是兩列布局，只是它在右端 分為 頂部 和 主體 兩部分， 頂部會放置一些點擊左側菜單關聯的菜單，主體放置點擊菜單顯示的內容

如何進行布局

• 它和兩列布局基本相同，不同點就是它在右端顯示不一樣
• 右端分為主體和頂部， 頂部 固定高度 , 主體 通過 flex:1 來達到自適應
• 右端容器通過 flex-direction: column; 指定子元素 按交叉軸(豎軸) 排列布局。

    <div class="full">
        <div class="left">

        </div>
        <div class="right">
            <div class="right-head">

            </div>
            <div class="right-main">

            </div>
        </div>
    </div>

*{
    margin: 0;
    padding: 0;
}
.full{
    width: 100%;
    height: 100vh;
    display: flex;
    /* flex-wrap: wrap; */
}
.left{
    width: 200px;
    height: 100vh;
    background: rgb(0, 140, 255);
}
.right{
    height: 100vh;
    display: flex;
    flex:1;
    flex-direction: column;
    background: rgb(158, 159, 160); 
}
.right-head{
    height: 80px;
    background: cornflowerblue;
}
.right-main{
    flex: 1;
    background: orange;
}

居中布局

居中布局在我們日常寫頁面時經常用到，場景也比較多，eg： 登陸 , 彈窗Dialog .

這里我使用 flex 來實現 居中布局，flex 實現起來更簡潔，這里就不討論其它實現方法了。

如何進行布局

• 通過給父容器 的 寬度 和 高度 都 100% ， 鋪滿整個屏幕，
• 父容器 display 為 flex, 使用 justify-content: center; 決定 子元素在主軸的方向上怎么顯示，在通過 align-items: center; 來決定子元素在交叉軸(豎軸)如何顯示。
• 子容器只要指定 width 和 ·height 即可。

    <div class="full">
        <div class="login">
            登陸
        </div>
    </div>

*{
    margin: 0;
    padding: 0;
}
.full{
    width: 100%;
    height: 100vh;
    background: rgb(0, 110, 255);
    display: flex;
    justify-content: center;
    align-items: center;
}
.login{
    width: 500px;
    height: 400px;
    line-height: 400px;
    text-align: center;
    border-radius: 15px;
    background: rgb(70, 25, 129);
    color: white;
    font-size: 33px;
    font-weight: 900;
}

瀑布流布局

瀑布流布局在我們現在的前端頁面中經常會用的到，它可以有效的降低頁面的復雜度，節省很多的空間，對於整個頁面不需要太多的操作，只需要下拉就可以瀏覽用戶需要看到的數據；並且，在當前這個APP至上的時代，瀑布流可以提供很好的用戶體驗，通過結合下拉刷新，上拉加載進行數據的懶加載等操作，對於用戶的體驗感來說是接近於滿分的！

瀑布流的特點：

• 等寬不等高，高度是動態識別圖像的高度來顯示的。
• 它會當計算當前屏幕的寬度，來顯示對應的個數，一行排滿的話，它會找到第一行高度最低的繼續排列第二行，依次類推排列。

實現方法

• CSS 實現方法： column-count + column-gap 來達到分欄排放和每項之間的間距，但使用它有缺點，固定死了 列，不能動態隨着瀏覽器的寬度動態變化而變化分欄。
• JS實現方法： 固定死圖片的寬度， 圖片放置到一個數組中， 瀏覽器根據動態識別寬度來判斷當前顯示多少項，然后遍歷數組，將url 放置 src 中， 下拉刷新數據，重新調取請求數據接口，push到數組中，實現下拉請求數據。

本文采用CSS 實現，開發中為了節省時間，可以使用庫來實現。

<div class="container">
    <div class="waterFall">
      <div class="item">
        <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1737312773,3182446833&fm=26&gp=0.jpg"
          alt="">
        <p>First</p>
      </div>
      <div class="item">
        <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1875486819,805819368&fm=26&gp=0.jpg" alt="">
        <p>First</p>
      </div>
      <div class="item">
        <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=35353288,1650949252&fm=26&gp=0.jpg" alt="">
        <p>First</p>
      </div>
      <div class="item">
        <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1474216128,3433531408&fm=26&gp=0.jpg"
          alt="">
        <p>First</p>
      </div>

      <div class="item">
        <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=143483417,2871731501&fm=26&gp=0.jpg" alt="">
        <p>First</p>
      </div>
      <div class="item">
        <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1098989386,3642257866&fm=26&gp=0.jpg"
          alt="">
        <p>First</p>
      </div>
      <div class="item">
        <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1040129980,3013621150&fm=26&gp=0.jpg"
          alt="">
        <p>First</p>
      </div>
    </div>
  </div>

 .container {
      width: 80%;
      margin: 0 auto;
    }

    .waterFall {
      /* 頁面分幾列顯示 */
      column-count: 4;
      -webkit-column-count: 4;
      /* Firfox */
      -moz-column-count: 4;
      /*  */
      /* 列之間的間距 */
      column-gap: 1em;
      -webkit-column-gap: 1em;
      -moz-column-gap: 1em;
    }

    .item {
      padding: 1em;
      margin: 0 0 1em 0;
      border: 1px solid orange;
    }

    .item img {
      width: 100%;
      margin-bottom: 10px;
    }

總結

本文主要是HTML布局進行查缺補漏復習，下一章將進行BOM的補充。祝願大家都能找到一份好的工作！

結語

✨覺得不錯的點贊，幫忙轉發分享以下，原創不易！