资讯专栏INFORMATION COLUMN

解决flex布局的justify-content: space-between对齐方式的一个BUG的

Joonas / 2441人阅读

摘要:在设置的时候,它会把子元素靠边对齐平均分剩余的空间。这样看起来特别恶心,中间空了一大块出来,看起来特别像一个,而不是我们要的跟上一行一个一个对齐的效果。现在来解决这个问题,在这里提供两个方法伪类提供占位元素伪类方案占位元素方案效果


在设置display:flex,justify-content: space-betweend的时候,它会把子元素靠边对齐平均分剩余的空间。

例如:打算一行放三个子元素

效果:

这看起来一点问题都没有,还挺好看的,但是如果下一行不够三个呢,只有两个的时候就会出现问题。

这样看起来特别恶心,中间空了一大块出来,看起来特别像一个bug,而不是我们要的跟上一行一个一个对齐的效果。

现在来解决这个问题,在这里提供两个方法:

伪类:after

提供占位元素

伪类方案

占位元素方案

效果

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/54985.html

相关文章

  • 解决flex布局justify-content: space-between对齐方式一个BUG

    摘要:在设置的时候,它会把子元素靠边对齐平均分剩余的空间。这样看起来特别恶心,中间空了一大块出来,看起来特别像一个,而不是我们要的跟上一行一个一个对齐的效果。现在来解决这个问题,在这里提供两个方法伪类提供占位元素伪类方案占位元素方案效果 在设置display:flex,justify-content: space-betweend的时候,它会把子元素靠边对齐平均分剩余的空间。 例如:打算一...

    BlackMass 评论0 收藏0
  • Flex布局语法笔记

    摘要:布局的传统解决方案,基于盒状模型,依赖属性属性属性。一基础和术语布局是啥是的缩写,意为弹性布局,用来为盒状模型提供最大的灵活性。基本概念采用布局的元素,称为容器,简称容器。该属性的个值分别表示具体对齐方式与轴的方向有关。        网页布局(layout)是 CSS 的一个重点应用。布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + floa...

    legendmohe 评论0 收藏0
  • 常用布局方式Flex 布局

    摘要:常用的布局方式之布局一布局介绍人们已经慢慢放弃了低版本浏览器,所以布局是现在首选的布局方式。使用了属性的标签,我们称之为容器,它的所有子元素自动成为容器成员,我们称之为项目。属性用来控制项目在侧轴的对齐方式。是和的简写形式。 常用的布局方式之 Flex 布局 一、 Flex布局介绍 人们已经慢慢放弃了低版本浏览器,所以 flex 布局是现在首选的布局方式。 flex 布局又称之为 弹性...

    Mertens 评论0 收藏0
  • flex布局基础知识文档

    摘要:布局基础知识文档基础知识概念一个有效的布局方式,即使不知道视窗的大小或者元素未知的情况下智能的,灵活的调整和分配元素和空间两者之间的关系特性默认水平对齐默认不换行默认使所有子元素占满一行,并自动调整子元素的大小改变默认宽度包含概念布局容器为 flex布局基础知识文档 基础知识 概念 : 一个有效的布局方式,即使不知道视窗的大小或者元素未知的情况下智能的,灵活的调整和分配元素和空间两者...

    wall2flower 评论0 收藏0
  • 图解CSS3-flex布局

    摘要:前言前言最近笔者在复习以前基础知识,发现很多细的知识点还是需要重新再总结一番。第一个子元素和最后一个子元素与边框也会有一定的距离。同时也欢迎大家在上和我一起进阶前端。找到我找到我知乎前言 最近笔者在复习以前基础知识,发现很多细的知识点还是需要重新再总结一番。本文对flex布局进行图解说明,以后忘了的同学可以随时过来查看,欢迎转载,烦请注明出处。 主体 万丈高楼平地起,熟悉flex,先来了解下...

    Freeman 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<