Detailed explanation of two methods to solve a bug in the justify-content: space-between alignment of flex layout

Detailed explanation of two methods to solve a bug in the justify-content: space-between alignment of flex layout

When setting display:flex, justify-content: space-betweend, it will align the child elements to the sides and evenly divide the remaining space.

For example: if you want to put three child elements in one row

Effect:

This seems to be fine and looks good, but if there are not three characters in the next row, there will be problems if there are only two.

This looks particularly disgusting, with a large empty space in the middle. It looks particularly like a bug, rather than the desired effect of aligning one by one with the previous line.

Now to solve this problem, here are two methods:

  • Pseudo-class: after
  • Provide a placeholder element

Pseudo-class solution

Placeholder element solution

Effect

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

<<:  Web designer is a suitable talent

>>:  Usage instructions for the docker create command

Recommend

Example steps for using AntV X6 with Vue.js

Table of contents 0x0 Introduction 0x1 Installati...

Detailed explanation of server-id example in MySQL master-slave synchronization

Preface When we build a MySQL cluster, we natural...

Vue implements zoom in, zoom out and drag function

This article example shares the specific code of ...

JavaScript deshaking and throttling examples

Table of contents Stabilization Throttling: Anti-...

Detailed process record of nginx installation and configuration

Table of contents 1 Introduction to nginx 1 What ...

How to create a swap partition file in Linux

Introduction to Swap Swap (i.e. swap partition) i...

js realizes two-way data binding (accessor monitoring)

This article example shares the specific code of ...

What are the benefits of using B+ tree as index structure in MySQL?

Preface In MySQL, both Innodb and MyIsam use B+ t...

The difference between GB2312, GBK and UTF-8 in web page encoding

First of all, we need to understand that GB2312, ...

Vue uses GraphVis to develop an infinitely expanded relationship graph

1. Go to the GraphVis official website to downloa...

Use render function to encapsulate highly scalable components

need: In background management, there are often d...

Analysis of the process of deploying pure HTML files in Tomcat and WebLogic

1. First, the pure HTML file must have an entry i...

Implementing a table scrolling carousel effect through CSS animation

An application of CSS animation, with the same co...