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

Solution to the network failure when installing workstation in a virtual machine in ESXI

Display flex arrangement in CSS (layout tool)

Solution to the network failure when installing workstation in a virtual machine in ESXI

jQuery achieves the effect of advertisement scrolling up and down

CSS implements the function of hiding the search box (animation forward and reverse sequence)

Summary of Operator Operations That Are Very Error-Prone in JavaScript

How to prompt and open hyperlink a

Solution to secure-file-priv problem when exporting MySQL data

mysql 5.6.23 winx64.zip installation detailed tutorial

jQuery implements all shopping cart functions

Example of using HTML+CSS to implement a secondary menu bar when the mouse is moved

How to use mysqldump to backup MySQL data

Recommend

Web Design Tutorial (6): Keep your passion for design

TypeScript Enumeration Type

CSS3 simple cutting carousel picture implementation code

MySQL log trigger implementation code

express project file directory description and detailed function description

Vue3 navigation bar component encapsulation implementation method

How to implement input checkbox to expand the click range

Implementation of docker-compose deployment of zk+kafka+storm cluster

Linux command line quick tips: How to locate a file

JavaScript to achieve a simple countdown effect

About deploying a web project to Alibaba Cloud Server (5 steps to do it)

Ubuntu16.04 builds php5.6 web server environment

VMware virtual machine three connection methods example analysis

A simple way to implement all functions of shopping cart in Vue

Detailed explanation of the use of MySQL concatenation function CONCAT