Display flex arrangement in CSS (layout tool)

Regarding display: flex layout, some people have a deep understanding of it, and I also learned from others' work.

display: I have no idea what flex layout is or its basic concepts, I just know how to use it. Whenever I see something like a concept, I just glance over it.

First property and usage: flex-direction

There are 4 methods I know of: row (horizontal arrangement), row-revese (horizontal reverse arrangement), column (vertical arrangement), column-reserve (vertical reverse arrangement)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div style="width:300px;border:1px solid red;display: flex;flex-direction: row;">
            <div style="width: 100px;height: 100px;background-color: black;"></div>
            <div style="width: 100px;height: 100px;background-color: green;"></div>
            <div style="width: 100px;height: 100px;background-color: yellow;"></div>
            <div style="width: 100px;height: 100px;background-color: blue;"></div>
        </div>
    </body>
</html>

The above code and effect diagram are the effects when the attribute is row

Note: Although the width is set, the parent container is only 300px, and the child div cannot reach 100px, but adapts to the parent container

Just replace the flex-direction: row code with flex-direction: row-revese or flex-direction: column or flex-direction: column-reserve to get different effects.

Here is the effect diagram:

row-revese

-------

column

-------

column-reverse

-------

The second property and usage: flex-wrap

These are the line break properties: nowrap (no line break), wrap (line break), wrap-reverse (direction line break)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div style="width:300px;border:1px solid red;display: flex;flex-wrap: wrap;">
            <div style="width: 100px;height: 100px;background-color: black;"></div>
            <div style="width: 100px;height: 100px;background-color: green;"></div>
            <div style="width: 100px;height: 100px;background-color: yellow;"></div>
            <div style="width: 100px;height: 100px;background-color: blue;"></div>
        </div>
    </body>
</html>

This is the code and effect diagram of the line break

-------

Replace the property flex-wrap: wrap with nowrap (no line break) and wrap-reverse (direction line break) to get the following effect:

nowrap

-----

wrap-reverse

---------

The third attribute and usage: justify-content

（這些屬性都是抄別人的）

flex-start (default): left-aligned;

Align Left

flex-end: right alignment

Right Align

center: centered;

Center alignment space-between: Align both ends, with equal spacing between items;

Alignment space-around: The spacing on both sides of each item is equal, that is, the spacing between items is twice as large as the spacing between items and borders.

The distance between the two sides is equal. I, Xiaobai, also stole a lot of things from there.

Summarize

The above is the editor’s introduction to display flex organization (layout tool) in CSS. I hope it will be helpful to you!

<<: Steps for packaging and configuring SVG components in Vue projects

>>: Incomplete solution for using input type=text value=str

Summary of the use of vue Watch and Computed

Display flex arrangement in CSS (layout tool)

Summary of the use of vue Watch and Computed

Interviewer asked how to achieve a fixed aspect ratio in CSS

Vue implements file upload and download

Solution to the error problem of Vscode remotely connecting to Ubuntu

How to install Solr 8.6.2 in Docker and configure the Chinese word segmenter

iframe multi-layer nesting, unlimited nesting, highly adaptive solution

How to install babel using npm in vscode

How to write the parent and child directories of HTML relative paths

Docker starts MySQL configuration implementation process

How to install docker and portainer in kali

Recommend

An example of using Lvs+Nginx cluster to build a high-concurrency architecture

Detailed explanation of performance monitoring of MySQL server using Prometheus and Grafana

Common tags in XHTML

MYSQL string forced conversion method example

Mysql delete data and data table method example

Detailed explanation of how to install mysql5.7.16 from source code in centos7 environment

Detailed tutorial on how to quickly install Zookeeper in Docker

The whole process of upgrading Angular single project to multiple projects

Steps for Django to connect to local MySQL database (pycharm)

How to create a basic image of the Python runtime environment using Docker

Navicat for MySql Visual Import CSV File

Detailed explanation of the function and usage of DOCTYPE declaration

Vue implements the countdown component for second kills

Ubuntu 20.04 CUDA & cuDNN Installation Method (Graphical Tutorial)

How to implement JavaScript's new operator yourself