CSS 小結筆記之解決flex佈局邊框對不齊 CSS 小結筆記之伸縮佈局 (flex)

時間 2019-12-14

標籤 css 小結筆記解決 flex 佈局邊框不齊伸縮欄目 CSS 简体版

原文原文鏈接

在使用flex 進行伸縮佈局的時候，常常會給子盒子設置邊框，這時常常會出現上下邊框對不齊的狀況。本篇文章來探討並解決這個問題。html

具體出現的問題以下圖所示ide

具體代碼以下佈局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            font-size: 16px;
        }
        
        .fa {
            height: 18.75em;
            width: 31.25em;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
        }
        
        .l1,
        .l2 {
            flex: 1;
            background-color: aqua;
            display: flex;
            border: 0.25em solid black;
            border-right: none;
        }
        
        .l2 {
            border-top: none;
            background-color: deeppink;
        }
        
        .son1,
        .son2,
        .son3,
        .son4,
        .son5 {
            box-sizing: border-box;
            border-right: 0.25em solid black;
            flex: 1;
        }
        
        .son5 {
            flex: 2;
        }
    </style>
</head>

<body>
    <div class="fa">
        <div class="l1">
            <div class="son1"></div>
            <div class="son2"></div>
            <div class="son5"></div>
        </div>
        <div class="l2">
            <div class="son1"></div>
            <div class="son2"></div>
            <div class="son3"></div>
            <div class="son4"></div>
        </div>

    </div>

</body>

</html>

View Code

能夠發現咱們在分配盒子的時候明明除了.son5 設置爲flex:2外，都是設置了 flex:1 ;按照咱們預想的結果應該是對齊的，可是事實上在添加邊框以後，邊框並不能對齊。post

產生這個問題的主要緣由以下：

首先咱們知道flex ：n 是flex：n n 0 的簡寫，主要的做用是將剩餘的空間進行按比例劃分。flex

而咱們在指定了邊框大小後，邊框將會佔用固定的大小，那麼可分配的剩餘大小就會改變。ui

如上例（計算原理不清楚的同窗能夠參考CSS 小結筆記之伸縮佈局 (flex)）：url

藍色區域spa

共有四個豎邊框，大小共爲4*0.25*16=16px;3d

那麼剩下可分配區域的大小爲：31.25*16-16=484pxcode

因此藍色區域的三塊大小分別是：1*484/4=121px、1*484/4=121px、2*484/2=242px

紅色區域

共有五個豎邊框，大小共爲5*0.25*16=20px;

那麼剩下可分配區域的大小爲：31.25*16-20=480px

因此紅色區域的四塊大小都是：1*480/4=120px

所以紅色區域和藍色區域的子盒子大小其實是不對等的，所以邊框出現了偏移。

下面將給出這個問題的解決方法：

一、最基本的方法

　　使用伸縮基準值（flex-basis）即flex 值中的百分比+border-box 來實現

　　首先把右邊框都設置爲子盒子的邊框，接着給子盒子添加屬性　box-sizing: border-box，最後將flex：1 改成 flex：0 0 25%，將flex：2改成 flex：0 0 50%。

　　這麼作的原理是，將子盒子的盒子計算大小模式改成 border-box ，即分配或計算式，邊框和內邊距也被視爲盒子大小的一部分。

　　以後再設置每一個盒子的起始長度，這樣就能夠解決這個問題。

　　具體代碼以下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            font-size: 16px;
        }
        
        .fa {
            height: 18.75em;
            width: 31.25em;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
        }
        
        .l1,
        .l2 {
            flex: 1;
            background-color: aqua;
            display: flex;
            border: 0.25em solid black;
            border-right: none;
        }
        
        .l2 {
            border-top: none;
            background-color: deeppink;
        }
        
        .son1,
        .son2,
        .son3,
        .son4,
        .son5 {
            box-sizing: border-box;
            border-right: 0.25em solid black;
            flex: 0 0 25%;
        }
        
        .son5 {
            flex: 0 0 50%;
        }
    </style>
</head>

<body>
    <div class="fa">
        <div class="l1">
            <div class="son1"></div>
            <div class="son2"></div>
            <div class="son5"></div>
        </div>
        <div class="l2">
            <div class="son1"></div>
            <div class="son2"></div>
            <div class="son3"></div>
            <div class="son4"></div>
        </div>

    </div>

</body>

</html>

View Code

　　結果圖爲

　　這種方法的優勢是簡單直觀，缺點是不夠靈活，並且每一個盒子的設置都要計算其所佔百分比。

二、將邊框畫出

　　咱們知道在不給出邊框的時候，是不會出現問題的，並且即便不給出邊框，盒子與盒子之間也是有分界線的，所以咱們能夠本身在盒子的邊線上經過定位畫出一個邊框。

　　經過::after僞元素選擇器，設置其高度100%，寬度爲0.25em，定位靠右。這樣只要給須要邊框效果的盒子增長這個類，則至關於給盒子增長了右邊框。　

 
        .bd-r {
            position: relative;
        }
        
        .bd-r::after {
            content: "";
            width: 0.25em;
            height: 100%;
            position: absolute;
            background-color: black;
            top: 0;
            right: 0;
        }

　　完整代碼以下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            font-size: 16px;
        }
        
        .fa {
            height: 18.75em;
            width: 31.25em;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
        }
        
        .l1,
        .l2 {
            flex: 1;
            background-color: aqua;
            display: flex;
            border: 0.25em solid black;
            border-right: none;
        }
        
        .l2 {
            border-top: none;
            background-color: deeppink;
        }
        
        .son1,
        .son2,
        .son3,
        .son4,
        .son5 {
            flex: 0 0 25%;
        }
        
        .son5 {
            flex: 0 0 50%;
        }
        
        .bd-r {
            position: relative;
        }
        
        .bd-r::after {
            content: "";
            width: 0.25em;
            height: 100%;
            position: absolute;
            background-color: black;
            top: 0;
            right: 0;
        }
    </style>
</head>

<body>
    <div class="fa">
        <div class="l1">
            <div class="son1 bd-r"></div>
            <div class="son2 bd-r"></div>
            <div class="son5 bd-r"></div>
        </div>
        <div class="l2">
            <div class="son1 bd-r"></div>
            <div class="son2 bd-r"></div>
            <div class="son3 bd-r"></div>
            <div class="son4 bd-r"></div>
        </div>

    </div>

</body>

</html>