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
Docker: Modifying the DOCKER_OPTS parameter in /etc/default/docker does not take effect
By default, /etc/default/docker configuration wil...
Analyze the difference between computed and watch in Vue
Table of contents 1. Introduction to computed 1.1...
Graphical explanation of the underlying principle of JavaScript scope chain
Table of contents Preface Scope 1. What is scope?...
How to implement online hot migration of KVM virtual machines (picture and text)
1. KVM virtual machine migration method and issue...
How to use docker to deploy front-end applications
Docker is becoming more and more popular. It can ...
5 super useful open source Docker tools highly recommended
Introduction The Docker community has created man...
vmware installation error VMware Workstation failed to start VMware Authorization Service
Background: I want to install a SAP ECC server an...
JS 4 super practical tips to improve development efficiency
Table of contents 1. Short circuit judgment 2. Op...
Detailed explanation of using the at command for one-time scheduled tasks in Linux
Table of contents Preface 1. Introduction to one-...
How to Dockerize a Python Django Application
Docker is an open source project that provides an...
A collection of information about forms and form submission operations in HTML
Here we introduce the knowledge about form elemen...
How to use VLAN tagged Ethernet card in CentOS/RHEL system
In some scenarios, we want to assign multiple IPs...
Nginx uses ctx to realize data sharing and context modification functions
Environment: init_worker_by_lua, set_by_lua, rewr...
How to change the system language of centos7 to simplified Chinese
illustrate When you install the system yourself, ...
CSS implements the function of hiding the search box (animation forward and reverse sequence)
Placing a search box in the top menu bar is a com...