Flex彈性布局在項目中的運用

一、Flex布局實現頭尾固定、中間內容自適應

頭尾固定，中間區域可以滑動效果是移動端最常見的效果，以京東頁面為例。以前開發時常用的方法是用固定布局position:fixed;實現，但是該方法在ios上或者其他機型上會出現問題。現在，可以用flex方法快速實現該布局。

 

  

<div class="wrap">
       <div class="header">頭部</div>
       <div class="content">中間內容區域</div>
       <div class="footer">尾部</div>
</div>

  

html,body{
    height: 100%;    /* 很重要 */
}
.wrap{
    width: 100%;
    height: 100%;     /* 很重要 */
    display: flex;
    flex-direction: column;
    font-size: 16px;
}
.header{
    background: aquamarine;
    height: 60px;
}
.content{
    flex: 1;    /* 很重要 */
    overflow-y:auto; /* 很重要，否則當該內容超過一屏時，尾部區域不會固定 */
    background: #4CAF50;
}
.footer{
    background: tan;
    height: 40px;
}

/* 讓內容居中顯示 */
.header,.content,.footer{
    display: flex;
    align-items: center;
    justify-content: center;
}

 

運行效果：

  

說明：css樣式中，一定要設置html,body以及最外層包裹容器的高度為100%，同時中間內容區域的樣式一定要添加flex:1;以及overflow-y:auto;

 

二、flex布局最后一行列表左對齊的N種方法

 

 

1、如果每一行列數是固定的

如果每一行列數是固定的，則下面兩種方法可以實現最后一行左對齊。

方法一：模擬space-between和間隙

也就是我們不使用justify-content:space-between聲明在模擬兩端對齊效果。中間的gap間隙我們使用margin進行控制。

例如：

.container {
    display: flex;
    flex-wrap: wrap;
}
.list {
    width: 24%; height: 100px;
    background-color: skyblue;
    margin-top: 15px;
}
.list:not(:nth-child(4n)) {
    margin-right: calc(4% / 3);
}

 

此時，布局效果是這樣的：

 

 

方法二：根據個數最后一個元素動態margin

由於每一列的數目都是固定的，因此，我們可以計算出不同個數列表應當多大的margin值才能保證完全左對齊。

例如，假設每行4個元素，結果最后一行只有3個元素，則最后一個元素的margin-right大小是“列表寬度+間隙大小”的話，那最后3個元素也是可以完美左對齊的。

然后，借助樹結構偽類數量匹配技術（這篇文章“偽類匹配列表數目實現微信群頭像CSS布局的技巧”中的布局技巧就是借助這種技術實現），我們可以知道最后一行有幾個元素。

例如：

.list:last-child:nth-child(4n - 1)說明最后一行，要么3個元素，要么7個元素……
.list:last-child:nth-child(4n - 2)說明最后一行，要么2個元素，要么6個元素……

在本例中，一行就4個元素，因此，我們可以有如下CSS設置：

.container {
    display: flex;
    /* 兩端對齊 */
    justify-content: space-between;
    flex-wrap: wrap;
}
.list {
    width: 24%; height: 100px;
    background-color: skyblue;
    margin-top: 15px;
}
/* 如果最后一行是3個元素 */
.list:last-child:nth-child(4n - 1) {
    margin-right: calc(24% + 4% / 3);
}
/* 如果最后一行是2個元素 */
.list:last-child:nth-child(4n - 2) {
    margin-right: calc(48% + 8% / 3);
}

 

效果如下GIF示意，刪除列表后，布局依然穩穩地左對齊。

 

2、如果每一子項寬度不固定

有時候，每一個flex子項的寬度都是不固定的，這個時候希望最后一行左對齊該如何實現呢？

由於此時間隙的大小不固定，對齊不嚴格，因此，我們可以直接讓最后一行左對齊即可。具體方法有兩個：

方法一：最后一項margin-right:auto

CSS代碼如下：

.container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.list {
    background-color: skyblue;
    margin: 10px;
}
/* 最后一項margin-right:auto */
.list:last-child {
    margin-right: auto;
}

  

  

方法二：創建偽元素並設置flex:auto或flex:1

.container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.list {
    background-color: skyblue;
    margin: 10px;
}
/* 使用偽元素輔助左對齊 */
.container::after {
    content: '';
    flex: auto;    /* 或者flex: 1 */
}

 

參考：https://www.zhangxinxu.com/wordpress/2019/08/css-flex-last-align/