flex布局使用space-between后最后一行左对齐
需求
在页面开发的过程中,我们往往会经常使用到CSS布局,而目前使用最多的大部分都是flex
、grid
布局两种,今天UP主在编写页面的时候,有这样一个需求
1、在一个盒子里面,有很多元素,需要让他横向排列
2、每个元素的宽度未知
3、当元素很多的时候,需要自动换行的下一行
看是简单的需求,办法也有很多,下面列举两个
不完美实现方案
1、使用inline-block
直接在css中使用display:inline-block
,就可以实现效果
效果如图:
目前是完全符合上面的需求的,但是我们会发现,第一行最后一个位置,因为容纳不下下一个元素了,所以直接换行显示下一个元素,这样就导致最后的空隙很大,很影响美观
2、使用flex
有朋友可能会想,这个不是很简单,直接使用flex
布局,然后使用justify-content: space-between
不就可以完美的解决空隙大的问题啦,而且看起来很很和谐,使用这个方法确实可以让第一行的空隙变得很完美,但是我们会发现另外一个问题
效果如图:
可以看到,我们的第一行的确是完美的解决了空隙大的问题,但是随之而来的,就是第二行因为使用了justify-content: space-between
,导致下面直接把剩下的元素直接平均分了,很明显这样是会导致最后一行元素,不够铺满,而直接平均分了,这样也是不行的,那到底要怎么来解决问题呢
完美实现方法
如图所示,这就是我们说需要的效果,最后一行元素不够铺满一行时,让元素左对齐排列,那这样是如何实现的呢
其实实现方法很简单,同样是使用flex
布局,并且使用justify-content: space-between
属性
关键一步,我们在当前元素的伪元素after
添加flex:auto
即可实现
.parent{display: flex;justify-content: space-between;flex-wrap: wrap;&::after {content: '';flex: auto;}
}
确实非常简单,我们看下原理
就是通过伪元素让伪元素的宽度正好补齐剩余的宽度,这样就相当于是一整行铺满,所以就不会出现上面的直接将下面的几个元素直接平均分了
Tips
:方法简单粗暴,可能有更好的办法,但是UP也是想分享自己在开发过程中遇到的问题是如何解决的,如果有更好的办法,也欢迎大家相互讨论相互学习
flex布局使用space-between后最后一行左对齐相关推荐
- html实现 左图右文_让CSS flex布局最后一行左对齐的N种方法
作者:张鑫旭 https://www.zhangxinxu.com/wordpress/2019/08/css-flex-last-align/ 前言 小伙伴们是否还记得,之前小编也发布了几篇关于CS ...
- ## 使用flex布局(多行,一行三个),换行后最后一行左右对齐问题
使用flex布局(多行,一行三个),换行后最后一行左右对齐问题 <html><head><style>html,body,ul {margin: 0;padding ...
- CSS 弹性布局/flex布局最后一行左对齐
设计案例: 左对齐前 左对齐后 html: <h1 class="module-title">核心产品</h1> <ul class="co ...
- flex布局换行之后让底部一行左对齐
flex布局换行之后让底部一行左对齐 在用flex布局的时候遇到了下面这种问题,这是我的结构 <div class="videoMain"><div class= ...
- flex 最后一行 左对齐
场景 : 无法确定flex 换行后列表个数又不固定,直接调试html特别麻烦,使用Grid布局 Grid布局天然有gap间隙,且天然格子对齐排布,因此,实现最后一行左对齐可以认为是天生的效果. < ...
- flex布局——最后一行左对齐的实现方式(css功能实现)
在学习了css3之后,经常会用到的布局就是flex布局了. 比如要实现下图的这种布局: 给父级设置display:flex; 实现一行中内容靠边对齐,则需要设置justify-content:spac ...
- flex布局,没有justify-self,如何实现一左一中布局
自从接触到flex布局后,就觉得用的特别爽,后来发现flex布局的justify-self好像不起作用,不像 align-self 属性那样可以单独对子元素自己设置是左对齐还是右对齐和居中对齐: 现在 ...
- flex布局遇到white-space:nowrap怎么超出一行显示省略号
一.场景: 二.简化场景: 三.页面布局: <ul class="g-list"><li class="g-list-item">< ...
- flex布局最后一行左对齐的处理
1.添加几个空item(用于大多数场景) 根据布局列数添加空item,比如每行最大n列,那么在最后添加n个空item即可 <html> <style>.item {width: ...
最新文章
- python搭建numpy_python开发环境搭建及numpy基本属性-【老鱼学numpy】
- 近期活动盘点:AI Time:论道AI安全与伦理、大数据、AI在中国金融保险业的应用案例分享讲座...
- oracle 的启动与连接
- hdoj-1715-大菲波数(大斐波那契数列)
- datagrid如何获取一行数据中的某个字段值_redis 所支持的数据类型以及其应用场景...
- 关于CAS服务器磁盘占用的问题,锁定目录惹的祸
- 如何保障MySQL主从复制关系的稳定性?关键词(新特性、crash-safe)
- python基础编码规范_Python基础:编码规范(4)
- 数据库系统基础教程(1)数据库系统世界
- VC++2010安装教程
- winform 窗口伸缩 panel控件太多闪烁问题
- sudo rosdep init 出现 ERROR: cannot download default sources list from:
- 短视频去水印威信小程序源码下载,内附去水印解析接口
- DSPE-PEG11-Mal含有马来酰亚胺基团的PEG试剂
- c语言20s计数器,供应电子计时器、JC20S、JY20S、计数控制器、计米器
- 关于地理数据收集与处理的基本工具推荐(2)---10m精度的全球土地覆盖数据下载
- Tensorflow 2.x(keras)源码详解之第四章:DatasetTFRecord
- 19软考软件设计师_19个免费的设计师在线杂志
- Unity UGUI实现图文混排
- HTML+CSS简单漫画网页设计成品 大学生个人HTML响应式--(海贼王 6页)
热门文章
- python imread的用法_Python imread、newaxis用法详解
- C#编写一个简易计算器
- 专访携程商旅邱斐:博弈中的大猪如何利用数据驱动业务?
- 这段时间 你都做了什么?
- 当前时间是否在时间段内
- 6.playbook基本使用
- [概率期望][树形DP][LCA]JZOJ 5814 树
- 机器学习——正则化理论(Regularization Theory)
- docker 开放 2375端口
- list-style-type:定义列表样式