CSS Flex 布局 space-between 最后一行左对齐
首先看代码和效果
<style>
.main {
outline: 1px solid;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.main>p {
width: 100px;
height: 100px;
margin-bottom: 10px;
background-color: lightgreen;
}
</style>
<body>
<p class="main">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
</p>
</body>
可以看到最后一个p并没有在中间，而是在最后了
因为我们设置了justify-content为space-between，意思就是两边贴边
这时候我们可以给最外层p设置个伪元素，宽度和里面的p宽度一样就好了
只需要两行css就可以
.main:after {
content: "";
width: 100px;
}这时候看效果
其实原理就是最后一个伪元素把他挤过来了
就算有9个也没影响，因为他的高度是0，看下图↓
推荐教程：《CSS教程》
以上是CSS Flex 布局 space-between 最后一行左对齐的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
手把手带你使用CSS Flex和Grid布局实现3D骰子（附代码）
Sep 23, 2022 am 09:58 AM
在前端面试中，经常会问到如何使用 CSS 实现骰子/麻将布局。下面本篇文章给大家介绍一下用CSS 创建一个 3D 骰子（Flex和Grid布局实现3D骰子）的方法，希望对大家有所帮助！
常用的Flex布局属性有哪些
Feb 25, 2024 am 10:42 AM
flex布局的常用属性有哪些，需要具体代码示例Flex布局是一种用于设计响应式网页布局的强大工具。它通过使用一组灵活的属性，可以轻松控制网页中元素的排列方式和尺寸。在本文中，我将介绍Flex布局的常用属性，并提供具体的代码示例。display：设置元素的显示方式为Flex。.container{display:flex;}flex-directi
一文详解三个 flex 属性对元素的影响
Aug 30, 2022 pm 07:50 PM
在开发的时候经常用 flex 这个属性作用于弹性盒子的子元素，例如：flex:1或者flex: 1 1 auto，那么这个属性到底控制了元素怎么的行为呢？flex:1又究竟是什么含义呢？让这篇文章带你彻底了解 flex 属性吧！
带你吃透Flex布局的三个属性：flex-grow、flex-shrink、flex-basis
Dec 06, 2022 pm 08:37 PM
本篇文章带大家深入了解CSS Flex布局的三个属性：flex-grow、flex-shrink、flex-basis，希望对大家有所帮助！
如何通过Css Flex 弹性布局实现滑动菜单效果
Sep 26, 2023 pm 02:13 PM
如何通过CSSFlex弹性布局实现滑动菜单效果在网页设计中，滑动菜单是一种常见的交互效果，它可以让网页更加流畅和美观。本文将教你使用CSSFlex弹性布局来实现这一效果，并提供具体的代码示例。CSSFlex是一种新的布局方式，可以方便地实现各种复杂的布局效果。它通过设置容器和子元素的属性来控制布局，其中flex属性是最重要的属性之一。首先，我们需要一个
CSS 自适应布局属性优化技巧：flex 和 grid
Oct 21, 2023 am 08:03 AM
CSS自适应布局属性优化技巧：flex和grid在现代Web开发中，实现自适应布局是一项非常重要的任务。随着移动设备的普及和屏幕尺寸的多样化，确保网站在各种设备上都能良好地展示，适应不同的屏幕尺寸，是一个必不可少的要求。幸运的是，CSS提供了一些强大的属性和技巧来实现自适应布局。本文将重点介绍两个常用的属性：flex和grid，并提供具体的代码示例
详解Css Flex 弹性布局中的网格间距与边框处理方法
Sep 26, 2023 am 10:31 AM
标题：详解CSSFlex弹性布局中的网格间距与边框处理方法引言：CSSFlex弹性布局是一种现代的页面布局方式，可以使网页在不同的屏幕尺寸下自动适应，并且具有灵活性和响应性。在使用CSSFlex弹性布局时，我们经常会遇到需要设置网格间距和边框的情况。本文将详细介绍CSSFlex弹性布局中的网格间距与边框处理方法，并提供具体的代码示例。一、网格间距的处
