在使用flex 进行伸缩布局的时候,经常会给子盒子设置边框,这时经常会出现上下边框对不齐的情况。本篇文章来探讨并解决这个问题。

具体出现的问题如下图所示

具体代码如下

<!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>

可以发现我们在分配盒子的时候明明除了.son5 设置为flex:2外, 都是设置了 flex:1 ;按照我们预想的结果应该是对齐的,但是事实上在添加边框之后,边框并不能对齐。

产生这个问题的主要原因如下:

首先我们知道flex :n 是flex:n n 0 的简写,主要的作用是将剩余的空间进行按比例划分。

而我们在指定了边框大小后,边框将会占用固定的大小,那么可分配的剩余大小就会改变。

如上例(计算原理不清楚的同学可以参考CSS 小结笔记之伸缩布局 (flex)):

蓝色区域

共有四个竖边框,大小共为4*0.25*16=16px;

那么剩下可分配区域的大小为:31.25*16-16=484px

所以蓝色区域的三块大小分别是: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

因此红色区域和蓝色区域的子盒子大小实际上是不对等的,因此边框出现了偏移。

下面将给出这个问题的解决方法:

1、最基本的方法

  使用伸缩基准值(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>

  结果图为

  

  这种方法的优点是简单直观,缺点是不够灵活,而且每个盒子的设置都要计算其所占百分比。

2、将边框画出

  我们知道在不给出边框的时候,是不会出现问题的,而且即使不给出边框,盒子与盒子之间也是有分界线的,因此我们可以自己在盒子的边线上通过定位画出一个边框。

  通过::after伪元素选择器,设置其高度100%,宽度为0.25em,定位靠右。这样只要给需要边框效果的盒子增加这个类,则相当于给盒子增加了右边框。 

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

  完整代码如下:

<!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>

  效果图为

  

  可以发现和方法一显示结果一样。这个方法更加便捷,可重用性更高,而且这种写法可以广泛应用于分割线,边框等。

  

CSS 小结笔记之解决flex布局边框对不齐的更多相关文章

  1. CSS 小结笔记之浮动

    在css中float是一个非常好用的属性,float最基本用法是用来做文字环绕型的样式的. 基本用法:float:left | right 例如 <!DOCTYPE html> <h ...

  2. CSS实例详解:Flex布局

    本文由云+社区发表 本文将通过三个简单的实例,实际应用上篇文章的基础理论知识,展示下Flex布局是如何解决CSS布局问题. 一.垂直居中 这里同时用非flex布局和flex布局两种方式来实现,可以对比 ...

  3. Css animation 与 float 、flex 布局问题

    1. 有这样一段css html 代码 <div class="container"> <div class="float-left"> ...

  4. 解决flex布局下, elementui table组件不能跟随父组件的宽度而变化的bug

    bug: 我在flex布局的元素中使用了elementui的table组件,饿了么的table上会被加一个动态的宽度, 当第一次改变flex元素宽度的时候.table的动态宽度会变化,第二次和以后就不 ...

  5. css 位置居中篇,flex布局【转】

    最近看到沅老师的博客,关于flex布局的,觉得不错,http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

  6. CSS 小结笔记之伸缩布局 (flex)

    CSS flex 是一种伸缩布局,之前块级元素布局在同一行,可以通过display或position或float来实现,而本篇介绍一个新的方法——flex(弹性布局). flex 为和模型布局提供了极 ...

  7. CSS 小结笔记之em

    1.为什么使用em em也是css中的一种单位,和px类似.很多人会疑惑为什么有了px之后还要使用em,而且em使用起来相对于px来讲比较麻烦. em主要是应用于弹性布局,下面给出一个小栗子说明em的 ...

  8. CSS 小结笔记之BFC

    BFC 即为Block formatting context 的缩写,BFC 主要用来将一个盒子设置为一个隔离的容器,不管盒子内部的元素具有什么属性,都不会影响到盒子的外面. 1.哪些元素能产生BFC ...

  9. CSS 小结笔记之图标字体(IconFont)

    本篇主要介绍一种非常好用的图标大法——图标字体(IconFont). 什么是图标字体?顾名思义,它是一种字体,只不过这个字体显示的并不是具体的文字之类的,而是各种图标. 网站上经常会用到各种图标,之前 ...

随机推荐

  1. logstash使用template提前设置好maping同步mysql数据到Elasticsearch5.5.2

    上篇blog说到采用logstash-input-jdbc将mysql数据同步到ES(http://www.cnblogs.com/jstarseven/p/7704893.html),但是这里有一个 ...

  2. 全网最详细的大数据集群环境下多个不同版本的Cloudera Hue之间的界面对比(图文详解)

    不多说,直接上干货! 为什么要写这么一篇博文呢? 是因为啊,对于Hue不同版本之间,其实,差异还是相对来说有点大的,具体,大家在使用的时候亲身体会就知道了,比如一些提示和界面. 安装Hue后的一些功能 ...

  3. SwitchHosts—hosts管理工具

    SwitchHosts是一个管理.快速切换Hosts小工具,开源软件,一键切换Hosts配置,非常实用,高效.开发Web过程成,部署有多套环境,网址域名都相同,部署在不同的服务器上,有开发环境.测试环 ...

  4. wordpress添加面包屑

    第一步:在functions.php中添加如下代码 // 面包屑导航 function get_breadcrumbs() { global $wp_query; if ( !is_home() ){ ...

  5. DDA, Bresenham line's algorithm and Voxel Traversal used in the Grid-Accelerator in PBRT

        - DDA(Digital Differential Analyzer, 数值微分法) -    计算机图形学中,经常会遇到一些计算机中”经典“的问题.例如,如何利用计算机”离散“的特质,模拟 ...

  6. helm之chartmuseum

    1.概述 helm使得在k8s集群里面部署应用变得更简单,就像在linux系统里面使用yum安装软件一样,helm主要是利用的chart,首先看一下chart的结构: # tree zipkin zi ...

  7. Quartz框架多个trigger任务执行出现漏执行的问题分析--转

    原文地址:http://blog.csdn.net/dailywater/article/details/51470779 一.问题描述 使用Quartz配置定时任务,配置了超过10个定时任务,这些定 ...

  8. Spring 注解方式引入配置文件

    配置文件,我以两种为例,一种是引入Spring的XML文件,另外一种是.properties的键值对文件: 一.引入Spring XML的注解是@ImportResource @Retention(R ...

  9. SpringMVC融合Swagger UI使用

    相信大家都很熟悉springmvc,在用其进行开发工作的时候,有没有遇到几个小问题?比如: 1.前后端分离的模式下,前端开发人员如何得知后端的开发进度,有哪些接口可用? 2.后端开发人员在测试自己的接 ...

  10. netty源码解解析(4.0)-4 线程模型-概览

    netty线程体系概览 netty的高并发能力很大程度上由它的线程模型决定的,netty定义了两种类型的线程: I/O线程: EventLoop, EventLoopGroup.一个EventLoop ...