“This is the first day of my participation in the Gwen Challenge in November. See details of the event: The last Gwen Challenge in 2021”.

CSS Basics – Flex elastic layout

1. Know the Flex layout

1.1 What is Flex Layout

Flex layout is also called elastic layout. As the name implies, elastic layout allows the box to be flexible and flexible. This is not easy to understand

1.2 Application Scenarios of the Elastic Layout

In simple terms, the elastic layout box can be made elastic, can let the box can be telescopic, want a box to the elements within the horizontal arrangement, and uniform distribution can use the flex layout flex also can make the elements vertical array layout, distributed way can be arbitrary choice, take a look at the flex layout properties, to better his role

1.3 How to use the Flex layout

Flex is a display property that can be used on any box, and the elements inside the box will be arranged according to the Flex layout

        <div class="box">
               ...
        </div>
Copy the code

Give the parent element a display: flex; So this box is an elastic layout

     .box{
         display:flex;
     }
Copy the code

Now what do flex properties do

Flex layout properties

2.1 the flex – direction

Flex – direction is specified attribute value orientation of elasticity of the inside of the box element: the column | row | column – reverse | row – reverse

Row from left to right Default value

Row-reverse from right to left column from up to down column-reverse from down to up

2.2 the flex – wrap

Flex-wrap is the option to wrap or not wrap when there are too many elements in a row. There are three properties: nowRap Does not wrap (default) wrap Wrap wrap the first line is at the bottom

2.3 the justify – content

Orientation of the justify – the content is specified in the distribution of elements on the properties as follows: the flex – start | flex – end | center | space – between | space – around

Use a diagram to illustrate the difference between these properties

Flex-start box start flex-end box end center Box center Space-between element Evenly spaced Spaced space-around element evenly spaced spaced with a gap at both ends half spacedCopy the code

2.4 the align – items

Align-items is the vertical alignment of elements when you align them horizontally

Attribute is: flex – start | flex – end | center | stretch | baseline

2.5 the flex – turns up | | flex – the shrink | | flex – basis

Flex-grow is a property used on child boxes. It is the ratio of the child boxes to the parent box, compared to other child boxes. For example, if each child box is Flex-grow :1, then all boxes have the same ratio.

Flex-shrink means that when the box is scaled, if Flex-shrink: 0, no scaling is done, and the other properties are scaled

The Flex-basis property defines the principal axis space occupied by the project before the excess space is reallocated

2.6 the flex

Flex properties are short for the 2.5 three properties

Flex: flex - turns up | | flex - the shrink | | flex - basis flex: 0 1 autoCopy the code

2.7 the align – self

The align-self attribute allows a single element to be aligned differently from other elements, overriding the align-items attribute, which defaults to auto

Align-self has one more auto default than align-items

When you want an element to be sorted separately, you can override the parent element’s align-items property by adding the align-self attribute to the element

2.8 the align – content

Align-content is used when the element has more than one line, such as flex-wrap: wrap, after a line break. For example, dice

html

    <div class="box">
        <div class="column">
             <span class="item"></span>
             <span class="item"></span>
             <span class="item"></span>
       </div>
       <div class="column">
             <span class="item"></span>
             <span class="item"></span>
             <span class="item"></span>
       </div>
    </div>
Copy the code

.box{
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
 }
 .column{
     display:flex;
     justify-content: space-between;
 }
Copy the code

When an elastic box has two or more elements that do not fit in one row, align-content can be used to specify the arrangement between the boxes

Flex layout specific use cases

3.1 Grid Layout

The simplest grid layout is evenly distributed

html <div class="Grid"> <div class="Grid-cell"></div> <div class="Grid-cell"></div> <div class="Grid-cell"></div> </div>  css .Grid{ display:flex; } .Grid-cell{ flex:1 }Copy the code

Just add flex: 1 to the child element; I’m going to divide the space of the parent box equally

3.2 Percentage Layout

Similar to grid layout, one or more child elements are set to size, and the rest of the area is filled by a child element

html <div class="Grid"> <div class="Grid-cell Grid-cell-1"></div> <div class="Grid-cell Grid-cell-2"></div> <div class="Grid-cell"></div> </div> css .Grid{ display:flex; }.Grid-cell {flex:1}.Grid-cell-1{flex: 0 0 50%}.Grid-cell-1{flex: 0 0 33.3333%}Copy the code

The principle is that you add Flex: 1 to each child element to make it evenly distributed, but when you add flex: 0, 0 33.3333%, 33.3333% to a child element, it takes up a third of the space and another element takes up the rest

3.3 Layout of input boxes

You can also use Flex layout for input fields, for a simple example

When an input field has a front icon, an input field in the middle, and a submit field in the back, using Flex layout is a good idea. The rest is not added, the middle will be filled with the remaining space before and after removing, you can see the situation

3.4 Hanging layout

You can also use it when you need to add a picture or an element to a box, but you don’t have to

You can also use Flex layout by adding Flex: 1 to the elements of the text; When you insert an image element, it automatically fills up the rest

3.5 Fixing of the bottom column

A lot of times, whether it’s a big layout, or a small layout in a small box, there’s a requirement that I want it to be at the bottom all the time, whether it’s full or not, and that’s when you’re going to have a little bit of trouble with positioning. Flex layout can help, depending on the situation,

When you want a content fixed at the bottom, as is common, you can use flex layout and add Flex: 1 to the middle element; Flex -derection:column; Put it up and down so that the bottom element stays at the bottom

Finish this chapter