CSS Flex layout space-between last row left aligned-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

CSS Flex layout space-between last row left aligned

Guanhui

Jul 21, 2020 pm 12:48 PM

flex

CSS Flex layout space-between last row left aligned

First look at the code and effects

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

You can see that the last p is not in the middle, but at the end

Because we set justify-content to space-between, which means welting both sides

At this time, we can set a pseudo element for the outermost p, and the width is the same as the width of the p inside. Okay

You only need two lines of css

.main:after {
    content: "";
    width: 100px;
}

Look at the effect at this time

In fact, the principle is that the last pseudo element puts it Squeezed over

Even if there are 9 people, it will not affect it, because his height is 0, see the picture below↓

Recommended tutorial: " CSS tutorial》

The above is the detailed content of CSS Flex layout space-between last row left aligned. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

常用的Flex布局属性有哪些Feb 25, 2024 am 10:42 AM

flex布局的常用属性有哪些，需要具体代码示例Flex布局是一种用于设计响应式网页布局的强大工具。它通过使用一组灵活的属性，可以轻松控制网页中元素的排列方式和尺寸。在本文中，我将介绍Flex布局的常用属性，并提供具体的代码示例。display：设置元素的显示方式为Flex。.container{display:flex;}flex-directi

手把手带你使用CSS Flex和Grid布局实现3D骰子（附代码）Sep 23, 2022 am 09:58 AM

在前端面试中，经常会问到如何使用 CSS 实现骰子/麻将布局。下面本篇文章给大家介绍一下用CSS 创建一个 3D 骰子（Flex和Grid布局实现3D骰子）的方法，希望对大家有所帮助！

一文详解三个 flex 属性对元素的影响Aug 30, 2022 pm 07:50 PM

在开发的时候经常用 flex 这个属性作用于弹性盒子的子元素，例如：flex:1或者flex: 1 1 auto，那么这个属性到底控制了元素怎么的行为呢？flex:1又究竟是什么含义呢？让这篇文章带你彻底了解 flex 属性吧！

带你吃透Flex布局的三个属性：flex-grow、flex-shrink、flex-basisDec 06, 2022 pm 08:37 PM

本篇文章带大家深入了解CSS Flex布局的三个属性：flex-grow、flex-shrink、flex-basis，希望对大家有所帮助！

一文详解CSS3中的Flex布局Nov 01, 2022 pm 07:29 PM

本篇文章带大家了解一下CSS3中的Flex布局，希望对大家有所帮助！

详解Css Flex 弹性布局中的网格间距与边框处理方法Sep 26, 2023 am 10:31 AM

标题：详解CSSFlex弹性布局中的网格间距与边框处理方法引言：CSSFlex弹性布局是一种现代的页面布局方式，可以使网页在不同的屏幕尺寸下自动适应，并且具有灵活性和响应性。在使用CSSFlex弹性布局时，我们经常会遇到需要设置网格间距和边框的情况。本文将详细介绍CSSFlex弹性布局中的网格间距与边框处理方法，并提供具体的代码示例。一、网格间距的处

CSS 弹性布局属性详解：flex 和 justify-contentOct 24, 2023 am 11:52 AM

CSS弹性布局属性详解：flex和justify-content在现代的网页设计中，弹性布局（flexbox）成为了一种非常有用的布局方式。弹性布局允许我们轻松地创建自适应且灵活的布局，以适应各种屏幕尺寸和设备类型。两个核心属性flex和justify-content在弹性布局中扮演着重要的角色。一、flex属性flex属性是定义弹性布局容

flex为什么叫弹性布局Nov 21, 2023 pm 01:58 PM

flex之所以被称为弹性布局，是因为它能够实现更加灵活和高效的网页布局，并且具有弹性，可以自适应不同的屏幕大小和设备类型，这种布局方式的出现，解决了许多传统布局方法难以处理的问题，比如垂直居中、项目对齐、换行排列等。弹性布局具有主轴和交叉轴、对齐和分布、弹性项目的属性、换行和反向、空间分布和大小调整等特点。它能够适应不同的屏幕大小和设备类型，实现更加灵活和高效的网页布局。

See all articles