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

Things to note when writing self-closing XHTML tags

The img tag in XHTML is so-called self-closing, w...

Native js custom right-click menu

This article example shares the specific code of ...

mysql IS NULL using index case explanation

Introduction The use of is null, is not null, and...

Analysis and practice of React server-side rendering principle

Most people have heard of the concept of server-s...

5 Ways to Clear or Delete Large File Contents in Linux

Sometimes, while working with files in the Linux ...

Example code comparing different syntax formats of vue3

The default template method is similar to vue2, u...

How are spaces represented in HTML (what do they mean)?

In web development, you often encounter characters...

Encoding problems and solutions when mysql associates two tables

When Mysql associates two tables, an error messag...

MySQL InnoDB MRR Optimization Guide

Preface MRR is the abbreviation of Multi-Range Re...

How to write elegant JS code

Table of contents variable Use meaningful and pro...

How to implement online hot migration of KVM virtual machines (picture and text)

1. KVM virtual machine migration method and issue...

A brief discussion on React native APP updates

Table of contents App Update Process Rough flow c...

Introduction to container of() function in Linux kernel programming

Preface In Linux kernel programming, you will oft...