CSS Layout

CSS 2.1

CSS2.1 defines four layout methods, and the size and position of a box are determined by the relationship between a box and its siblings and ancestors.

  • Block layout: Layout mode for rendering documents.
  • Inline layout: Layout mode for rendering text.
  • Tabular layout: A layout pattern that uses tables to present 2D data.
  • Position layout: A layout pattern that allows you to position elements directly without having any relationship with other elements.


css 3

The main idea of the Flex layout introduced is to give the container the ability to control the height, width (set order) of the subitems. Fill the available space in an optimal way (mainly to accommodate all types of display devices and screen sizes). The Flex container makes the subprojects expand to fill the available space or shrink to prevent overflow from the container.

Most importantly, Flex layouts are unpredictable. Unlike regular layouts (blocks go from top to bottom, inlines go from left to right), regular layouts are good for page layouts, but lack intelligence for supporting large or complex applications (especially when it comes to changing the layout’s orientation, zooming or shrinking).


flex

Compatibility with the latest browser versions



Details can be found atFlex compatibility

The main compatibility issue here is IE, which requires -ms- for IE10. For compatibility between Internet Explorer 8 and Internet Explorer 9, it is requiredflex.js.


The term is introduced

Main axle & side axle


Photo source:Css-tricks.com/snippets/cs…





Photo source:www.ruanyifeng.com/blog/2015/0…

  • Main Axis: The main axis of the Flex container is used to configure the Flex project. Note that it is not necessarily horizontal, depending on the Flex-direction attribute.
  • Spindle start (the main – start) | spindle end (the main – end) : a Flex project configuration from the beginning of the spindle start side of the container, the spindle end end side.
  • Main size: The width or height of a Flex project in the main axis direction is the main length of the project. The main length attribute of a Flex project is either width or height, depending on which direction is facing the main axis.
  • Cross axis: The axis perpendicular to the main axis is called the side axis and is an extension of the side axis.
  • Lateral axis start (cross – start) | side shaft end (cross – end) : telescopic line configuration from a container to begin side to side shaft, shaft end side to side to an end.
  • Side axis length (cross size): The width or height of the Flex project in the side axis is the length of the Flex project side axis. The Flex project side axis length attribute is width or height attribute, which is opposite the side axis direction.

Residual problems:

Description of main size: There may be some ambiguity here, referring to the total length or the flex item length

Scale containers and projects

  • An element that is explicitly set to flex or inline-flex by display is a flex container. The flex container creates a new flex formatting context for its content, where a container set to Flex is rendered as a block-level element and a container set to inline-flex is rendered as an inline element.
  • If the element display is inline-flex and the element is a float or absolute position, display evaluates to flex.
  • Each child element of a scaling container becomes a scaling item.


With special reference to article 2 above:

If the element display is inline-flex and the element is a float or absolute position, display evaluates to flex. The rules are similar to the visual formatting we learned earlier. When floating and absolute positioning are present, inline-* = is used. A new one could be added to the chart below.

CSS – Visual Formatting Model

  1. If the ‘display’ value is’ none ‘and’ position ‘and’ float ‘are not set, the element does not generate a box.
  2. Otherwise, if the value of ‘positon’ is’ absolute ‘or’ fixed ‘, i.e. the box is absolutely positioned, the calculated value of ‘float’ is’ None ‘, and ‘display’ is set according to the table below. The position of the box is determined by ‘top’, ‘right’, ‘bottom’, ‘left’ and the containing block of the box.
  3. Otherwise, if the value of ‘float’ is not ‘None’, the box will float, and ‘display’ is set according to the table below.
  4. Otherwise, if the element is the root element, ‘display’ is set according to the table below.
  5. Otherwise, the remaining ‘display’ attribute values are the same as the specified values.
Specified value Computed value
inline-table table
inline, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption, inline-block block
inline-flex flex
others same as specified




Flex model functionality

  • Screen and browser window sizes also allow for flexible layout adjustments.
  • Resize a flex item by specifying that the flex item allocates additional space (flex container extra space) proportionally along the main or side axis.
  • Specifies that scaling items allocate extra space in the scaling container along the main or side axis, before, after, or between scaling items.
  • Specifies how to allocate extra space perpendicular to the element’s layout axis around that element.
  • Controls the layout direction of elements on the page
  • Reorder the elements on the screen in a manner different from that specified by the Document Object Model (DOM).
  • With Flex layout, the float, clear, and vertical-align attributes of child elements are invalidated.




Scaling container properties

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

Example:

<! DOCTYPEhtml>  
<html lang="en-US">  
    <head>  
        <meta charset="UTF-8">  
        <title>Document</title>  
        <style type="text/css">
            div {
                border: 2px solid black;
                border-radius: 5px;
            }
 
            .parent-flex {
                width: 800px;
                height: 400px;
                background-color: rgb(250.234.202);
 
                display: flex;
                flex-direction: row;
            }
 
            .child-flex {
                width: 100px;
                height: 100px;
                background-color: rgb(203.234.253);
            }
        </style>
    </head>  
    <body>
        <div class="parent-flex">
            <div class="child-flex">
                flex item1
            </div>
            <div class="child-flex">
                flex item2
            </div>
            <div class="child-flex">
                flex item3
            </div>
        </div>
    </body>  
</html> 
Copy the code




flex-direction

The main axis of the flex container, which determines the direction in which the flex item is placed in the flex container. Flex flow direction is set using the flex-direction property, which defaults to ROW.

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}
Copy the code
  • Row (default) : The main axis is horizontal and the starting point is on the left.
  • Row-reverse: The main axis is horizontal and the starting point is at the right end.
  • Column: The main axis is in the vertical direction, and the starting point is in the upper edge.
  • Column-reverse: the main axis is vertical and the starting point is at the bottom.







flex-wrap

By default, child element items are arranged in a single line. But there are many cases where subelements are arranged in more than one row. In the flex container, there is a flex newline property, which is used to set whether the flex item in the flex container should be displayed as a row or multiple lines, and to determine the direction of the side axis.

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}
Copy the code
  • Nowrap (default) : no line breaks.
  • Wrap: The first line is at the top.
  • Wrap-reverse: newline with the first line at the bottom.
<style type="text/css">
  div {
    border: 2px solid black;
    border-radius: 5px;
  }

  .parent-flex {
    height: 400px;
    background-color: rgb(250.234.202);

    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
  }

  .child-flex {
    width: 100px;
    height: 100px;
    background-color: rgb(203.234.253);
  }
</style>
Copy the code
<div class="parent-flex">
  <div class="child-flex">
    flex item1
  </div>
  <div class="child-flex">
    flex item2
  </div>
  <div class="child-flex">
    flex item3
  </div>
  <div class="child-flex">
    flex item4
  </div>
  <div class="child-flex">
    flex item5
  </div>
</div>
Copy the code


Below is the dynamic graph, if you can’t see the effect, refresh the page, go to see here.









flex-flow

A combination of telescopic flow direction and telescopic line feed. That is, flex-flow sets both flex-direction and flex-wrap properties, which are shorthand for these properties, and determine the main and side axes of a flex container.

.box {
  flex-flow: <flex-direction> || <flex-wrap>;
}
Copy the code
flex-flow:row wrap;
/* Either way */
flex-flow:wrap row;
Copy the code


justify-content

Used to set the alignment of the current flex item in a flex container in the main axis direction, specifying how to distribute the extra space in a flex container between flex items. This property also adds some control over the project when a flex project overflows a row.

.box {
  justify-content: flex - start | flex - end | center | space - between | space - around | space - evenly; }Copy the code
  • Flex-start (default) : left-aligned
  • Flex-end: right-aligned
  • Center: a center
  • Space-between: both ends are aligned with equal intervals between items.
  • Space-around: Equal spacing on both sides of each item. As a result, the spacing between items is twice as large as the spacing between items and the border.
  • Space-instituted: Each sub-item evenly divides container space. But there are compatibility issues.

<! DOCTYPEhtml>  
<html lang="en-US">  
    <head>  
        <meta charset="UTF-8">  
        <title>Document</title>  
        <style type="text/css">
            div {
                border: 2px solid black;
                border-radius: 5px;
            }
 
            .child-flex {
                width: 200px;
                height: 100px;
                background-color: rgb(203.234.253);
            }
 
            .parent {
                background-color: rgb(250.234.202);
                display: flex;
            }
 
            .flex-start {
                justify-content: flex-start;
            }
 
            .flex-end {
                justify-content: flex-end;
            }
 
            .flex-center {
                justify-content: center;
            }
 
            .flex-space-between {
                justify-content: space-between;
            }
 
            .flex-space-around {
                justify-content: space-around;
            }

            .flex-space-evenly {
                justify-content: space-evenly;
            }
        </style>
    </head>  
    <body>
        <div class="flex-start parent">
            <div class="child-flex">
                flex-start
            </div>
            <div class="child-flex">
                flex-start
            </div>
            <div class="child-flex">
                flex-start
            </div>
        </div>
        <br />
        <div class="flex-end parent">
            <div class="child-flex">
                flex-end
            </div>
            <div class="child-flex">
                flex-end
            </div>
            <div class="child-flex">
                flex-end
            </div>
        </div>
        <br />
        <div class="flex-center parent">
            <div class="child-flex">
                center
            </div>
            <div class="child-flex">
                center
            </div>
            <div class="child-flex">
                center
            </div>
        </div>
        <br />
        <div class="flex-space-between parent">
            <div class="child-flex">
                space-between
            </div>
            <div class="child-flex">
                space-between
            </div>
            <div class="child-flex">
                space-between
            </div>
        </div>
        <br />
        <div class="flex-space-around parent">
            <div class="child-flex">
                space-around
            </div>
            <div class="child-flex">
                space-around
            </div>
            <div class="child-flex">
                space-around
            </div>
        </div>
        <br />
        <div class="flex-space-evenly parent">
            <div class="child-flex">
                space-evenly
            </div>
            <div class="child-flex">
                space-evenly
            </div>
            <div class="child-flex">
                space-evenly
            </div>
        </div>
    </body>  
</html>
Copy the code

Space – instituted compatibility issues





It is replaced by space-between, and an empty element is added before and after the space placeholder.

.flex-space-evenly {
	justify-content: space-between;
}

.flex-space-evenly::before..flex-space-evenly::after {
	display: block;
	content: ' '
}
Copy the code


align-items

At the beginning of this article we talked about the main axis and side axis of the Flex layout, with illustration-content being the main axis and align-items being the side axis. As described in the text, lateral alignment refers to lateral alignment.

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}
Copy the code
  • Flex-start: Alignment of the starting point of the cross axes.
  • Flex-end: alignment of ends of crossed axes.
  • Center: Alignment of the midpoint of the cross axis.
  • Baseline: The baseline alignment of the first line of text of the project.
  • Stretch (default) : If the height is not set or auto is set, the project will occupy the entire height of the container.



<! DOCTYPEhtml>  
<html lang="en-US">  
    <head>  
        <meta charset="UTF-8">  
        <title>Document</title>  
        <style type="text/css">
            div {
                border: 2px solid black;
                border-radius: 5px;
            }
 
            .child-flex {
                width: 200px;
                height: 100px;
                background-color: rgb(203.234.253);
            }
 
            .parent {
                height: 600px;
                background-color: rgb(250.234.202);
                display: flex;
            }
 
            .flex-space-around {
                justify-content: space-around;

                align-items: stretch;
                align-items: flex-start;
                align-items: flex-end ;
                align-items: center;
                align-items: baseline;
            }
        </style>
    </head>  
    <body>
        <div class="flex-space-around parent">
            <div class="child-flex">
                item
            </div>
            <div class="child-flex" style="height: 300px; padding-top: 40px;">
                item
            </div>
            <div class="child-flex">
                item
            </div>

            <div class="child-flex">
                item
            </div>

            <div class="child-flex">
                item
            </div>
        </div>
    </body>  
</html>   
Copy the code


align-content

The align-content property defines the alignment of multiple axes. This property has no effect if the project has only one axis.

.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
Copy the code
  • Flex-start: align with the starting point of the cross axis.
  • Flex-end: aligns with the end of the cross axis.
  • Center: aligns with the midpoint of the intersecting axis.
  • Space-between: aligned with both ends of the intersecting axes, with evenly distributed spacing between axes.
  • Space-around: The spacing on both sides of each axis is equal. Therefore, the spacing between axes is twice as large as the spacing between axes and borders.
  • Space-instituted: Each axis evenly divides the container space. But there are compatibility issues.
  • Stretch (default) : Axis takes up the entire cross axis.
<! DOCTYPEhtml>  
<html lang="en-US">  
    <head>  
        <meta charset="UTF-8">  
        <title>Document</title>  
        <style type="text/css">
            div {
                border: 2px solid black;
                border-radius: 5px;
            }
 
            .child-flex {
                width: 200px;
                height: 100px;
                background-color: rgb(203.234.253);
            }
 
            .parent {
                height: 800px;
                background-color: rgb(250.234.202);
                display: flex;
            }
 
            .flex-space-around {
                justify-content: space-around;
                flex-wrap: wrap;
                align-content: stretch;
                align-content: flex-start;
                align-content: flex-end;
                align-content: center;
                align-content: space-between;
                align-content: space-around;
                align-content: space-evenly;

            }
        </style>
    </head>  
    <body>
        <br /><br />
        <div class="flex-space-around parent">
            <div class="child-flex">
                item
            </div>
            <div class="child-flex" style="height: 10px; padding-top: 290px;">
                item
            </div>
            <div class="child-flex" style="width: 50px; padding-top: 40px;">
                item
            </div>

            <div class="child-flex">
                item
            </div>

            <div class="child-flex">
                item
            </div>
            <div class="child-flex">
                item
            </div>

            <div class="child-flex">
                item
            </div>
            <div class="child-flex">
                item
            </div>

            <div class="child-flex">
                item
            </div>
        </div>
    </body>  
</html>   
Copy the code


What is the height of each flex line item when Flex evaluates it?





As shown in the figure, the three items in the first row are extremely irregular due to the arrangement of the lateral axis of the baseline, and the space height between each row is:


( p a r e n t . h e i g h t – f i r s t R o w . m a x H e i g h t – s e c o n d . m a x H e i g h t – t h i r d . m a x H i e g h t ) / ( r o w s – 1 ) (parent.height – firstRow.maxHeight – second.maxHeight – third.maxHieght) / (rows – 1)

MaxHeight here refers to the distance of the current line aligned vertically with align-items. MaxTopBorder + items. MaxBottomBorder.

Property value graphical display

Space – instituted compatibility issues



Use space-between instead. Similar to that.





Telescopic item attribute

A flex container item is a child element of a flex container. The text of a flex container is also considered a flex item. The content in a scaling project is the same as normal flow. Telescopic items have a spindle length and a side shaft length. The spindle length is the size of the flex item on the spindle, and the side axis length is the size of the flex item on the side axis. By default, the side axis length is the same as the parent element’s side axis length. Align-items: Stretch was mentioned earlier.

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self


order

The default display order for scaling items in a scaling container is the order in which documents appear in the source code. You can change the order in which a scaled item is displayed on a page by the order in which it is displayed. The order attribute defines the order of items. The smaller the value is, the more advanced it is. The default value is 0.

.item {
  order: <integer>;
}
Copy the code

HTML elements are in the same place, and items in the Flex layout are arranged in order




flex-grow

The Flex-Grow property defines the project’s zoom scale, which defaults to 0, or no zoom if there is free space.

.item {
  flex-grow: <number>; /* default 0 */
}
Copy the code


Clear concept: magnification is not for scaling projects, it is for the treatment of free space

<! DOCTYPEhtml>  
<html lang="en-US">  
    <head>  
        <meta charset="UTF-8">  
        <title>Document</title>  
        <style type="text/css">
            div {
                border: 2px solid black;
                border-radius: 5px;
            }
 
            .child-flex {
                height: 100px;
                background-color: rgb(203.234.253);
                display: flex;
                justify-content: center;
                align-items: center;
            }


            .child-flex1{}.child-flex2{}.child-flex3 {
              width: 200px;
            }
 
             .child-flex2:nth-child(3) {
                flex-grow: 1;
            }

            .child-flex3:nth-child(3) {
                flex-grow: 1;
            }
 
            .parent {
                height: 200px;
                background-color: rgb(250.234.202);
                display: flex;
            }
        </style>
    </head>  
    <body>
        <div class="flex-space-around parent">
            <div class="child-flex child-flex1">
                1
            </div>
            <div class="child-flex child-flex1">
                2
            </div>
            <div class="child-flex child-flex1">
                3
            </div>
        </div>
        <div class="flex-space-around parent">
            <div class="child-flex child-flex2">
                1
            </div>
            <div class="child-flex child-flex2">
                2
            </div>
            <div class="child-flex child-flex2">
                3
            </div>
        </div>
        <div class="flex-space-around parent">
            <div class="child-flex child-flex3">
                1
            </div>
            <div class="child-flex child-flex3">
                2
            </div>
            <div class="child-flex child-flex3">
                3
            </div>
        </div>
    </body>  
</html>
Copy the code









You can see three groups of elements above;

  • In the first group, the item width and flex-grow are not set
  • For the second group, set flex-grow without setting the item width
  • Third group, set item width, and set Flex-grow

As can be seen from 1 and 2, when flex-grow is set. Item3 will take up the remaining space. When you set the width of the item, flex-grow limits the width of item3 and the amount of space left over. And when it shrinks, it shrinks in equal proportions.

flex-shrink

The Flex-shrink attribute defines the scale by which a project shrinks. The default is 1, that is, if there is insufficient space, the project shrinks.

.item {
  flex-shrink: <number>; /* default 1 */
}
Copy the code



If all projects have a Flex-shrink attribute of 1, they are scaled equally when space is insufficient. If the flex-shrink attribute is 0 for one project and 1 for all other projects, the former does not shrink when space is insufficient. Negative values have no effect on this property.

Difference between flex-grow and flex-grow

Effect of the The default value Practical points
flex-grow amplification 0 Space [Remaining space occupied by the project]
flex-shrink narrow 1 Item [Space reduction causes the item to shrink]


flex-basis

The Flex-basis property defines the main size of the project before allocating extra space. Based on this property, the browser calculates whether the main axis has extra space. Its default value is Auto, the original size of the project.

.item {
  flex-basis: <length> | auto; /* default auto */
}
Copy the code
<! DOCTYPEhtml>  
<html lang="en-US">  
    <head>  
        <meta charset="UTF-8">  
        <title>Document</title>  
        <style type="text/css">
            div {
                border: 2px solid black;
                border-radius: 5px;
            }
 
            .child-flex {
                width: 200px;
                height: 100px;
                background-color: rgb(203.234.253);
                display: flex;
                justify-content: center;
                align-items: center;
            }
 
            .child-flex:nth-child(1) {
                flex-basis: 300px;
            }
 
            .parent {
                height: 600px;
                background-color: rgb(250.234.202);
                display: flex;
            }
        </style>
    </head>  
    <body>
        <div class="flex-space-around parent">
            <div class="child-flex">
                1
            </div>
            <div class="child-flex">
                2
            </div>
            <div class="child-flex">
                3
            </div>
        </div>
    </body>  
</html>
Copy the code



Conclusion:

  • Flex-basis has a higher priority than width. You can see this in the example above.
  • Can be set to the same value as the width or height attributes, and the item will occupy a fixed space.


flex

The flex attribute is short for flex-grow, flex-shrink, and flex-basis. The default value is 0 1 Auto. The last two attributes are optional.

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'>]}Copy the code

The first attribute is mandatory. The latter two properties are optional and are automatically calculated by the browser based on the parameter values.

Browser computing

flex: 2

flex: 2 auto

flex: 2 2



flex: 2 2 100



The effect is different depending on the default value

According to the above, we can see that flex-basis is either auto or 0%; It’s different here. So let’s see what happens.

<! DOCTYPEhtml>  
<html lang="en-US">  
    <head>  
        <meta charset="UTF-8">  
        <title>Document</title>  
        <style type="text/css">
            div {
                border: 2px solid black;
                border-radius: 5px;
            }
 
            .child-flex {
                height: 100px;
                background-color: rgb(203.234.253);
                display: flex;
                justify-content: center;
                align-items: center;
            }

            .child-flex2 {
              width: 200px;
            }

            .child-flex3 {
              width: 200px;
            }
 
             .child-flex2:nth-child(3) {
                flex: 1 2;
            }

            .child-flex3:nth-child(3) {
                flex: 1 2 auto;
            }
 
            .parent {
                height: 200px;
                background-color: rgb(250.234.202);
                display: flex;
            }
        </style>
    </head>  
    <body>
        <div class="flex-space-around parent">
            <div class="child-flex child-flex2">
                1
            </div>
            <div class="child-flex child-flex2">
                2
            </div>
            <div class="child-flex child-flex2">
                flex-basis: 0%
            </div>
        </div>
        <div class="flex-space-around parent">
            <div class="child-flex child-flex3">
                1
            </div>
            <div class="child-flex child-flex3">
                2
            </div>
            <div class="child-flex child-flex3">
                flex-basis: auto
            </div>
        </div>
    </body>  
</html>
Copy the code

  • flex: auto; When the main width shrinks to the width of the current item width, all items continue to shrink together.
  • flex: 0%; This is equivalent to invalidating flex-basis and, incidentally, invalidating width. When main is shrunk, it shrinks the current item to contentWidth before continuing to shrink other items.


Relationship between flex-grow, flex-shrink, and Flex-basis

What is the reference value for flex-grow, flex-shrink?

The benchmark here is basically to break down a formula for calculation. The base value here refers to the current position width of each item before the flex-grow, flex-shrink effect was performed.


There are several factors that affect this: Flex-basis, width, and content width

The calculation formula is as follows:









The flex – turns up calculation

In the base-value case, items allocate the remaining container space in proportion to their flex-grow values.

Specific enlarged value of each item:



Total length of item:



The flex – the shrink computing

In the base-value case, items shrink in proportion to their flex-shrink value.

The specific value shrunk for each item:





Total length of item:





Calculate according to the formula

<! DOCTYPEhtml>  
<html lang="en-US">  
    <head>  
        <meta charset="UTF-8">  
        <title>Document</title>  
        <style type="text/css">
            div {
                border: 2px solid black;
                border-radius: 5px;
            }
 
            .child-flex {
                height: 100px;
                background-color: rgb(203.234.253);
                display: flex;
                justify-content: center;
                align-items: center;
            }

            .child-flex1 {
              flex: 0 1 auto;
            }

            .child-flex1:nth-child(2) {
                width: 100px;
            }

            .child-flex1:nth-child(3) {
                flex: 0 2 400px;
            }
 
            .parent {
                height: 200px;
                background-color: rgb(250.234.202);
                display: flex;
            }
        </style>
    </head>  
    <body>
        <div class="flex-space-around parent">
            <div class="child-flex child-flex1">
                1
            </div>
            <div class="child-flex child-flex1">
                2
            </div>
            <div class="child-flex child-flex1">
                3
            </div>
        </div>
    </body>  
</html>
Copy the code

Let’s see:



flex-grow flex-shrink flex-basis The width attribute contentwidth baseWidth
item1 1 1 auto There is no According to the figure above: 6.422 6.422
item2 1 1 auto 100px Don’t need 100
item3 2 2 400 There is no Don’t need 400

Then we will now move the total width to: 1000px.

Current content width at 1000px baseWidth Increase the numerical The flex – turns ratio
item1 126.812 6.422 120.39 1
item2 220.391 100 120.391 1
item3 640.797 400 240.797 2

There is a decimal error, and this is the value that you see in Google Browser. But it’s basically proportional.

align-self

The align-self property allows a single item to have a different alignment than other items, overriding the align-items property. The default value is auto, which inherits the align-items property of the parent element. If there is no parent element, it equals stretch.

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
Copy the code

This property may take six values, all identical to the align-items property except auto.

<! DOCTYPEhtml>  
<html lang="en-US">  
    <head>  
        <meta charset="UTF-8">  
        <title>Document</title>  
        <style type="text/css">
            div {
                border: 2px solid black;
                border-radius: 5px;
            }
 
            .child-flex {
                width: 200px;
                height: 100px;
                background-color: rgb(203.234.253);
                display: flex;
                justify-content: center;
                align-items: center;
            }
 
            .child-flex:nth-child(3) {
                align-self: center;
            }
 
            .parent {
                width: 800px;
                height: 600px;
                background-color: rgb(250.234.202);
                display: flex;
            }
        </style>
    </head>  
    <body>
        <div class="flex-space-around parent">
            <div class="child-flex">
                1
            </div>
            <div class="child-flex">
                2
            </div>
            <div class="child-flex">
                3
            </div>
        </div>
    </body>  
</html>
Copy the code






Summarize the use of Flex

Define the concept of main axis side axis

- flex-direction
Copy the code

Flex container property, single row inside the container,

- Multiple items: justify-content - single item: align-contentCopy the code

Telescopic container properties, containers arranged in multiple rows:

- Multi-line mode: flex-wrap - Arrangement between multiple lines in a single behavior dimension: align-contentCopy the code

Telescopic item attribute

- Single row items placed in order: order - Single row items expanded and shrunk configuration, flex-grow, flex-shrink - Sets items to occupy spindle space: flex-basis. Handle the starting point of the expansion and contraction of the participation of a single item in a single row, which may be a bit circumvented, or remember the participation in calculating the baseWidth value. - Aligns the side axis of a single item in a single row of the container align-selfCopy the code






With Flex layout, the float, clear, and vertical-align attributes of child elements are invalidated

  • The first is that in the original layout, floats exist so that you can control the position of divs freely. But now Flex can implement float effects.
  • The second clear property has no effect because Flex is an elastic layout and does not overflow.
  • The third vertical-align attribute can be implemented with align-items.

With reference to

www.ruanyifeng.com/blog/2015/0…