CSS 小结笔记之解决flex布局边框对不齐
在使用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布局边框对不齐的更多相关文章
- CSS 小结笔记之浮动
在css中float是一个非常好用的属性,float最基本用法是用来做文字环绕型的样式的. 基本用法:float:left | right 例如 <!DOCTYPE html> <h ...
- CSS实例详解:Flex布局
本文由云+社区发表 本文将通过三个简单的实例,实际应用上篇文章的基础理论知识,展示下Flex布局是如何解决CSS布局问题. 一.垂直居中 这里同时用非flex布局和flex布局两种方式来实现,可以对比 ...
- Css animation 与 float 、flex 布局问题
1. 有这样一段css html 代码 <div class="container"> <div class="float-left"> ...
- 解决flex布局下, elementui table组件不能跟随父组件的宽度而变化的bug
bug: 我在flex布局的元素中使用了elementui的table组件,饿了么的table上会被加一个动态的宽度, 当第一次改变flex元素宽度的时候.table的动态宽度会变化,第二次和以后就不 ...
- css 位置居中篇,flex布局【转】
最近看到沅老师的博客,关于flex布局的,觉得不错,http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
- CSS 小结笔记之伸缩布局 (flex)
CSS flex 是一种伸缩布局,之前块级元素布局在同一行,可以通过display或position或float来实现,而本篇介绍一个新的方法——flex(弹性布局). flex 为和模型布局提供了极 ...
- CSS 小结笔记之em
1.为什么使用em em也是css中的一种单位,和px类似.很多人会疑惑为什么有了px之后还要使用em,而且em使用起来相对于px来讲比较麻烦. em主要是应用于弹性布局,下面给出一个小栗子说明em的 ...
- CSS 小结笔记之BFC
BFC 即为Block formatting context 的缩写,BFC 主要用来将一个盒子设置为一个隔离的容器,不管盒子内部的元素具有什么属性,都不会影响到盒子的外面. 1.哪些元素能产生BFC ...
- CSS 小结笔记之图标字体(IconFont)
本篇主要介绍一种非常好用的图标大法——图标字体(IconFont). 什么是图标字体?顾名思义,它是一种字体,只不过这个字体显示的并不是具体的文字之类的,而是各种图标. 网站上经常会用到各种图标,之前 ...
随机推荐
- System.Threading.Tasks.Task 引起的 IIS 应用池崩溃
接口服务运行一段时间后,IIS应用池就会突然挂掉,事件查看日志,会有事件日志Event ID为5011的错误 为应用程序池“PokeIn”提供服务的进程在与 Windows Process Activ ...
- 配置codis-proxy
在整个的处理过程之中,虽然利用codis可以帮助我们动态实现主从的配置,但是从实际来讲用户不可能直接去操作redis客户端,必须通过codis-proxy来代理,所以需要针对于codis-proxy进 ...
- 将本地代码提交到github
最近练习了freemarker 做了个代码生成工具,想提交到github上,在本地进行了提交,执行如下些命令 git init git add . * git commit -m "comm ...
- JavaScript 视频教程 收藏
001 JavaScript第1章 JavaScript概述 https://www.365yg.com/group/6410923214495940866/ 001 JavaScript第1章 Ja ...
- Linux 一次杀死多进程
.- | 说明: “grep firefox”的输出结果是,所有含有关键字“firefox”的进程. “grep -v grep”是在列出的进程中去除含有关键字“grep”的进程. “-”是截取输入行 ...
- Jni如何传递并且修改两个基础参数
最近在开发jni时,需要返回多个参数给java.这个过程中,碰到了一些问题,值得探讨一下. 具体是这样,jni方法jni_do_something作了底层处理后,得出两个int数据,需要将他们的值 ...
- Deep learning with Python 学习笔记(5)
本节讲深度学习用于文本和序列 用于处理序列的两种基本的深度学习算法分别是循环神经网络(recurrent neural network)和一维卷积神经网络(1D convnet) 与其他所有神经网络一 ...
- Repeater控件添加onmouseover和onmouseout事件
网友有问题,在Repeater控件中,需要添加onmouseover和onmouseout事件功能.Insus.NET有叫他参考<onmouseover和onmouseout在Repeater控 ...
- IIS日志自动清理
IIS在运行的过程中日志会不停地增长,若iis的网站被频繁的调用或不当的调用,则会产生很多日志.我在系统运维的时候曾出现过20G的系统盘,由于合作商开发的程序有问题,每几百微秒调用一次web服务,短期 ...
- Oracle11g自带的SQL_developer无法打开
在安装完Oracle Database 11g Release 2数据库,想试一下Oracle自带的SQL DeveloperW工具,在操作系统菜单的所有程序中找到SQL Developer如下所示, ...