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 CocosCreator MVC architecture
Overview This article will introduce the MVC arch...
In html, set the scroll bar to automatically display when the content in the div exceeds
In HTML pages, we sometimes need to automatically ...
Python MySQL database table modification and query
Python connects to MySQL to modify and query data...
A Brief Analysis of Subqueries and Advanced Applications in MySql Database
Subquery in MySql database: Subquery: nesting ano...
JavaScript to implement random roll call web page
JavaScript writes a random roll call webpage for ...
Solve the problem of running jupyter notebook on the server
Table of contents The server runs jupyter noteboo...
About the basic configuration tutorial of MySQL5.7.17 free installation version under Win10 (with pictures and text)
Database application is an indispensable part of ...
Steps to create a WEBSERVER using NODE.JS
Table of contents What is nodejs Install NodeJS H...
A brief analysis of whether MySQL primary key uses numbers or uuids for faster query
In actual development, the primary key of MySQL c...
How to deploy Tencent Cloud Server from scratch
Since this is my first post, if there are any mis...
MySQL index principle and usage example analysis
This article uses examples to illustrate the prin...
vue+echarts realizes the flow effect of China map (detailed steps)
@vue+echarts realizes the flow effect of China ma...
Undo log in MySQL
Concept introduction: We know that the redo log i...
How to strike a balance between ease of use and security in the login interface
Whether you are a web designer or a UI designer, ...
10 Website Usability Tips Everyone Should Know
Let’s not waste any more time and get straight to...