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>

View Code

　　效果图为

　　能够发现和方法一显示结果同样。这个方法更加便捷，可重用性更高，并且这种写法能够普遍应用于分割线，边框等。