How to solve the problem of left alignment of the last line in flex layout space-between
|
First look at the code and effect↓
<style>
.main {
outline: 1px solid;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.main>div {
width: 100px;
height: 100px;
margin-bottom: 10px;
background-color: lightgreen;
}
</style>
<body>
<div class="main">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
</body>
You can see that the last div is not in the middle, but at the end. Because we set justify-content to space-between, it means that both sides are attached At this time, we can set a pseudo element for the outermost div, and the width should be the same as the width of the inner div. Just two lines of css are enough
.main:after {
content: "";
width: 100px;
}Now look at the effect
In fact, the principle is that the last pseudo-element squeezes him over. Even if there are 9 of them, it doesn't matter, because its height is 0, see the picture below↓
This is the end of this article on how to solve the problem of left alignment of the last line of flex layout space-between. For more information about left alignment of flex layout space-between, please search previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future! |
<<: Teach you how to use docker-maven-plugin to automate deployment
>>: JavaScript Advanced Custom Exception
Recommend
Detailed explanation of JavaScript Proxy object
Table of contents 1. What is Proxy? 2. How to use...
MySQL 8.0.22 installation and configuration method graphic tutorial under Windows 10
MySQL 8.0.22 installation and configuration metho...
Research on the effect of page sidebar realized by JS
Table of contents Discover: Application of displa...
How to capture exceptions gracefully in React
Table of contents Preface ErrorBoundary Beyond Er...
Detailed explanation of TypeScript's basic types
Table of contents Boolean Type Number Types Strin...
Analysis of Hyper-V installation CentOS 8 problem
CentOS 8 has been released for a long time. As so...
Linux kernel device driver Linux kernel basic notes summary
1. Linux kernel driver module mechanism Static lo...
Detailed explanation of CSS margin collapsing
Previous This is a classic old question. Since a ...
An article teaches you how to use Vue's watch listener
Table of contents Listener watch Format Set up th...
How to play local media (video and audio) files using HTML and JavaScript
First of all, for security reasons, JavaScript ca...
Seven Principles of a Skilled Designer (2): Color Usage
<br />Previous article: Seven Principles of ...
A brief summary of vue keep-alive
1. Function Mainly used to preserve component sta...
How to run nginx in Docker and mount the local directory into the image
1 Pull the image from hup docker pull nginx 2 Cre...
Interpreting MySQL client and server protocols
Table of contents MySQL Client/Server Protocol If...
Detailed explanation of Socket (TCP) bind from Linux source code
Table of contents 1. A simplest server-side examp...