Use of Flexbox elastic box layout

This article is my case of using elastic box for reference only

reference resources:

https://www.runoob.com/css3/css3-flexbox.html

https://www.cnblogs.com/makalochen/p/13389628.html

Basic html and css

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flexbox</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="item"> 1 </div>
        <div class="item"> 2 </div>
        <div class="item"> 3 </div>
        <div class="item"> 4 </div>
        <div class="item"> 5 </div>
        <div class="item"> 6 </div>
    </div>
</body>
</html>

css

body {
    /*Set body background color*/
    background-color: #f5f5f5;
}

.container  {
    /*Center outer margin*/
    margin: 150px auto;
    /*Maximum width*/
    max-width: 800px;
    /*Fixed height*/
    height: 400px;
    /*padding */
    padding: 20px;
    /*background color */
    background-color: rgb(196,229,232);
    /*The border is 5px solid */
    border: 5px solid rgb(0, 181, 203);
}

.item {
    /*background color */
    background-color: rgb(0, 181, 203);
    /*Font color*/
    color: white;
    /*wide*/
    width: 100px;
    /*high*/
    height: 100px;
    /*Margin */
    margin: 2px;
    /*Bold font*/
    font-weight: bold;
    /*font size*/
    font-size: 5em;
    /*Text centered*/
    text-align: center;
}

effect

How to define elastic box

Here is a quote from the rookie tutorial

The elastic box consists of a flex container and a flex item.

Elastic containers are defined as elastic containers by setting the value of the display property to flex or inline flex.

The elastic container contains one or more elastic child elements.

Note: the outside of the elastic container and the inside of the elastic sub element are rendered normally. The elastic box only defines how the elastic sub elements are laid out in the elastic container.

Elastic sub elements are usually displayed in a row within the elastic box. By default, there is only one row per container.

From the above paragraph, we know that if the value of the display attribute of div is flex or inline flex, it can become an elastic container

Let's try

At this time, the css file is added

/*Set as elastic container*/
display: flex;

The content of the css file at this time

body {
    /*Set body background color*/
    background-color: #f5f5f5;
}

.container  {
    /*Center outer margin*/
    margin: 150px auto;
    /*Maximum width*/
    max-width: 800px;
    /*Fixed height*/
    height: 400px;
    /*padding */
    padding: 20px;
    /*background color */
    background-color: rgb(196,229,232);
    /*The border is 5px solid */
    border: 5px solid rgb(0, 181, 203);
    /*Set as elastic container*/
    display: flex;
}

.item {
    /*background color */
    background-color: rgb(0, 181, 203);
    /*Font color*/
    color: white;
    /*wide*/
    width: 100px;
    /*high*/
    height: 100px;
    /*Margin */
    margin: 2px;
    /*Bold font*/
    font-weight: bold;
    /*font size*/
    font-size: 5em;
    /*Text centered*/
    text-align: center;
}

effect

You can see that the elements in the container are arranged directly from left to right after setting this attribute, because the default arrangement of the sub elements of the elastic box is from left to right

CSS3 elastic box properties

The following table lists the attributes commonly used in elastic boxes:

attribute describe
display Specifies the type of HTML element box.
flex-direction Specifies the arrangement of sub elements in the elastic container
justify-content Sets the alignment of elastic box elements in the direction of the main axis (horizontal axis).
align-items Sets the alignment of elastic box elements in the direction of the side axis (longitudinal axis).
flex-wrap Sets whether to wrap lines when the child element of the elastic box exceeds the parent container.
align-content Modify the behavior of flex wrap attribute, similar to align items, but not set the child element alignment, but set the row alignment
flex-flow Abbreviations for flex direction and flex wrap
order Sets the order in which the child elements of the elastic box are arranged.
align-self Used on elastic child elements. Override the align items property of the container.
flex Sets how the child elements of the elastic box allocate space.

Flex direction sets the arrangement of child elements

Here only common

  • From left to right
  • Right to left
  • From top to bottom
  • Cut from the bottom

Other references:

https://www.runoob.com/cssref/css3-pr-flex-direction.html

The four values of the container attribute flex direction represent the different arrangement of child elements

Left to right (default)

flex-direction: row;

Right to left

flex-direction: row-reverse;

From top to bottom

flex-direction: column;

From bottom to top

flex-direction: column-reverse;

Flex wrap set line wrap

The maximum width of the container we set above is 800xp, and the width of elements in the container is 100px, that is to say, there can be at most 8. Now let's try 10

You can see that if the maximum width is exceeded, it will still be in one line. At this time, I want to make the child element wrap automatically when it exceeds the width of the parent container. What should I do?

css of container plus

/*Set the child element to wrap automatically when it exceeds the width of the parent container, and the first line is on the top*/
flex-wrap: wrap;

effect

Refer to other methods:

https://www.cnblogs.com/makalochen/p/13389628.html#flex-wrap attribute: defines line breaks

Flex flow sets the arrangement and wrapping of elements

This attribute is equivalent to the collection of the above two

  • flex-direction
  • flex-wrap

Example:

flex-flow: row-reverse wrap;

effect

Tags: css

Posted by robotman321 on Sat, 16 Apr 2022 20:41:14 +0930