当前位置：网站首页>Elastic box model

Elastic box model

2022-04-23 20:31:00 【Different 213】

Elastic box model concept

CSS3 New elastic box model ( Flexible Box or ElexBox), yes - A new method for HTML How the page realizes the layout . Properly

HTML When the page adapts to different sizes of screens and different devices , Elements are run predictably .

Implementation of elastic box model HTML Page layout is independent of direction . Unlike block level layouts, which focus on vertical direction , The inline layout focuses on horizontal direction .

The elastic box model is mainly applicable to HTML Components of the page and small-scale layout , It is not suitable for large-scale layout , Otherwise it will affect HTML Page performance .

Related concepts of elastic box model

Retractable container ( flex container) : The parent element of the package expansion project .
Expansion project ( flex item) : Each child element of the telescoping container .
Axis (axis) : Each elastic box model has two axes .

Spindle (main axis) : Stretch the item along its length - The axis of the secondary arrangement is called the spindle .

Side axle (cross axis) : The axis perpendicular to the main axis is called the side axis .
Direction (direction) : The main axis of the telescopic container consists of the starting point and the ending point of the main axis , The side axis is described by the start point and end point of the side axis
Direction of item arrangement .
Size ( dimension) : According to the main shaft and side shaft of the telescopic container , The width and height of the expansion project .

The corresponding spindle is called spindle size .

The corresponding side axis is called side axis dimension .

Define the elastic box model

CSS3 If you want to set it as an elastic box model in , Need to pass through display The style property is set to flex or inline- flex that will do .

display : flex;
display : inline-flex;

Set the specified element as the elastic box model according to the above example code , This element becomes a telescopic container , Its child elements become scalable items .

flex: Sets the elastic box model that specifies the element as a block level element .
inline-flex: Set the elastic box model that specifies the element as the block level element in the row .

The elastic box model still has browser compatibility problems :

display : -webkit-flex;
display: -ms-flex;
display: -moz-flex;
display: -o-flex;

The following code shows how to define the elastic box model ：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Define the elastic box model </title>
    <style> /*  Set... For the parent container element display by flex value  *  Indicates that the current element and all its child elements are elastic box models  *  By default , All child elements act as scaling items （ Arrange along the main axis ） */ .container{
      display : inline-flex; } .container div{
      width: 300px; height: 200px; } .container div:nth-child(1){
      background-color: darkviolet; } .container div:nth-child(2){
      background-color: green; } .container div:nth-child(3){
      background-color: blue; } </style>
</head>
<body>
    <!--  Implement the elastic box model HTML structure  ->  The structure of parents and children  -->
    <div class="container">
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

The renderings are as follows ：

Properties of the box model

flex-direction attribute

CSS flex-direction Properties apply to the expansion container elements , Direction used to create the spindle .

flex-direction: row| row-reverse | column| column-reverse

row: Set the spindle to be horizontal .
row-reverse: And row In the opposite direction .
column: Set the spindle to be vertical .
column-reverse: And column In the opposite direction .

The following code shows flex-direction Property usage ：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex-direction attribute </title>
    <style> /*  Set... For the parent container element display by flex value  *  Indicates that the current element and all its child elements are elastic box models  *  By default , All child elements act as scaling items （ Arrange along the main axis ） */ .container{
      border: 1px solid black; margin-top: 10px; display: flex; } .c1{
      /* flex-direction attribute  * effect —— Set the spindle direction of the elastic box model ( Horizontal or vertical ) * Usage 1 applies to telescopic container elements  * value  * row—— The default value is , Set the spindle to horizontal  * column—— Set the spindle to the vertical direction  */ flex-direction: row; } .c2{
      flex-direction: row-reverse; } .container div{
      width: 200px; height: 100px; } .container div:nth-child(1){
      background-color: darkviolet; } .container div:nth-child(2){
      background-color: orange; } .container div:nth-child(3){
      background-color: yellowgreen; } </style>
</head>
<body>
    <!--  Implement the elastic box model HTML structure  ->  The structure of parents and children  -->
    <div class="container c1">
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="container c2">
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

The effect is shown below ：

justify-content attribute

CSS justify-content Properties apply to the expansion container elements , Used to set the alignment of the expansion project along the main axis .

justify-content: center | flex-start| flex-end | space between| space-around

center: Stretch the item to the middle of the first line Set alignment .
flex-start: The scale item is aligned to the beginning of the first line .
flex-end: Scale items to the end of the first line .
space-between: Scaling items will be evenly distributed in one row .
space-around: Scaling items will be evenly distributed in one row , Keep half the space at both ends .

The following code shows justify-content Property usage ：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>justify-content attribute </title>
    <style> .container{
      border: 1px solid black; margin-top: 10px; display: flex; } /* justify-content attribute   effect  ——  Set the alignment of telescopic items on the spindle   usage  ——  Apply to telescopic container elements   Be careful  ——  The implementation is the alignment of the scaling project relative to the scaling container  */ .c1{
      /* flex-start ——  Indicates that the telescopic container is aligned along the starting point of the spindle  */ justify-content: flex-start; } .c2{
      /* center ——  Indicates the middle position of the telescopic container along the spindle  */ justify-content: center; } .c3{
      /* flex-end ——  Indicates that the telescopic container is aligned along the end of the spindle  */ justify-content: flex-end; } .c4{
      /* space-between ——  Indicates that the scaling items are evenly distributed in the scaling container  */ justify-content: space-between; } .c5{
      /* space-around——  Indicates that the scaling items are evenly distributed in the scaling container   The starting and ending positions are left blank  */ justify-content: space-around; } .container div{
      width: 200px; height: 100px; } .container div:nth-child(1){
      background-color: darkviolet; } .container div:nth-child(2){
      background-color: lightgreen; } .container div:nth-child(3){
      background-color: red; } </style>
</head>
<body>
    <!--  Implement the elastic box model HTML structure  ->  The structure of parents and children  -->
    <div class="container c1">
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="container c2">
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="container c3">
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="container c4">
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="container c5">
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

The effect is shown below ：

align-items attribute

CSS align-items Properties apply to the expansion container elements , Used to set the alignment of the line where the expansion project is located along the side axis .

align-items: center| flex-start | flex-end | baseline | stretch

center: Alignment of the expansion project to the middle of the side axis .
flex-start: Alignment of the starting point of the lateral axis of the expansion project .
flex- rend: Alignment of expansion items towards the end of the side axis .
baseline: The expansion project is aligned according to the baseline of the expansion project .
stretch: The default value is , The expansion project stretches to fill the entire expansion container .

The following code shows align-items Property usage ：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>align-items attribute </title>
    <style> .container{
      height: 150px; border: 1px solid black; margin-top: 10px; display: flex; } /* align-items attribute   effect ： Set the alignment of telescopic items along the side axis   usage ： Apply to telescopic container elements  */ .c1{
      /*  Alignment of the starting point of the lateral axis of the expansion project  */ align-items: flex-start; } .c2{
      /*  Alignment of the expansion project to the middle of the side axis  */ align-items: center; } .c3{
      /*  Alignment of expansion items towards the end of the side axis  */ align-items: flex-end; } .c4{
      /*  The expansion project is aligned according to the baseline of the expansion project  */ align-items: baseline; } .c5{
      /*  The default value is , The expansion project stretches to fill the entire expansion container  */ align-items: stretch; } .container div{
      width: 200px; height: 100px; } .container div:nth-child(1){
      background-color: darkviolet; } .container div:nth-child(2){
      background-color: lightgreen; } .container div:nth-child(3){
      background-color: red; } </style>
</head>
<body>
    <!--  Implement the elastic box model HTML structure  ->  The structure of parents and children  -->
    <div class="container c1">
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="container c2">
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="container c3">
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="container c4">
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="container c5">
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

design sketch ：

flex-wrap attribute

CSS flex-wrap Properties apply to the expansion container elements , It is used to set whether the child elements of the expansion container are displayed in single line or multiple lines .

flex-wrap: nowrap | wrap | wrap-reverse

nowrap: Set the single line display of expansion items . This way, Probably Cause overflow of the telescopic container .
wrap: Set the multi line display of telescopic items .
wrap-reverse: And wrap contrary .

The following code shows flex-wrap Property usage ：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex-wrap attribute </title>
    <style> .container{
      height: 200px; border: 1px solid black; margin-top: 10px; display: inline-flex; } /*  If the width of the telescopic container is set to be less than the sum of the widths of all child elements :  result ： *  Child elements do not wrap , Not equivalent to floating effect (  Word wrap ) *  The child element does not overflow .  effect ： Automatically adjust the width of all sub cables according to the width of the telescopic container  */ .c1{
      width: 500px; } /* flex-wrap attribute   effect ： Set whether expansion items are displayed in single line or multiple lines   usage ： Apply to telescopic container elements   value ： nowrap: Set to single line display ,  The result is to automatically adjust the width of all child elements according to the width of the telescopic container  wrap： Set to multi line display   The result is ：1、 If the width of the telescopic container is greater than the sum of the widths of all child elements , Single line display  2、 If the width of the telescopic container is less than the sum of the widths of all child elements , Multi line display （ Similar to floating ） */ .c2{
      width: 500px; flex-wrap: nowrap; } .c3{
      width: 500px; flex-wrap: wrap; } .c4{
      width: 500px; /*  Set the reverse direction of multi line display of telescopic items  */ flex-wrap: wrap-reverse; } .container div{
      width: 200px; height: 100px; } .container div:nth-child(1){
      background-color: darkviolet; } .container div:nth-child(2){
      background-color: lightgreen; } .container div:nth-child(3){
      background-color: red; } </style>
</head>
<body>
    <!--  Implement the elastic box model HTML structure  ->  The structure of parents and children  -->
    <div class="container c1">
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="container c2">
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="container c3">
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="container c4">
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

design sketch ：

align-content attribute

CSS align-content Properties apply to the expansion container elements , Used for setting up Telescopic row The alignment of . This property will change flex-
wrap Effect of attribute .

align-content: center | flex-start| flex-end I space-between I space around | stretch

center: Line up to the middle of the expansion container .
flex-start: Line up to the start of the expansion container .
flex-end: Line up to the end of the expansion container .
space-between: The guilds are evenly distributed in one line .
space-around: The guilds are evenly distributed in one line , Keep half the space at both ends .
stretch: The default value is , Lines will stretch to take up extra space .

The following code shows align-content Property usage ：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>align-content attribute </title>
    <style> .container{
      height: 300px; border: 1px solid black; margin-top: 10px; width: 500px; display: inline-flex; flex-wrap: wrap; } /* align-content attribute   effect ： Set up multi line display of scalable items , Alignment along the side axis   Be careful ： This property is not valid for single line display of scalable items   Implementation steps ： 1、 Set the scaling item to multi line display ：flex—wrap:wrap; 2、 utilize align-content Property to set the alignment  */ .c1{
      align-content: flex-start; } .c2{
      align-content: center; } .c3{
      align-content: flex-end; } .c4{
      align-content: space-between; } .c5{
      align-content: space-around; } .c6{
      align-content: stretch; } .container div{
      width: 200px; height: 100px; } .container div:nth-child(1){
      background-color: darkviolet; } .container div:nth-child(2){
      background-color: lightgreen; } .container div:nth-child(3){
      background-color: red; } </style>
</head>
<body>
    <!--  Implement the elastic box model HTML structure  ->  The structure of parents and children  -->
    <div class="container c1">
        <div></div>
        <div>c1</div>
        <div></div>
    </div>
    <div class="container c2">
        <div></div>
        <div>c2</div>
        <div></div>
    </div>
    <div class="container c3">
        <div></div>
        <div>c3</div>
        <div></div>
    </div>
    <div class="container c4">
        <div></div>
        <div>c4</div>
        <div></div>
    </div>
    <div class="container c5">
        <div></div>
        <div>c5</div>
        <div></div>
    </div>
    <div class="container c6">
        <div></div>
        <div>c6</div>
        <div></div>
    </div>
</body>
</html>

design sketch ：

flex-flow attribute

CSS flex- flow Properties apply to the expansion container elements , The attribute is flex-direction and flex- wrap Abbreviation .

flex-flow: <'flex-direction'>ll <'flex-wrap'>

flex attribute

CSS flex Attribute is a shorthand attribute , It is used to set how the expansion project can be extended or shortened to fit the available space in the expansion container .

flex: auto | none| [ <'flex-grow'> <'flex -shrink'>? || <'flex-basis'> ]

auto: The expansion project will be sized according to its width and height , Equivalent to setting this property to “flex: 11 auto”.
none: The expansion project will be sized according to its width and height , Equivalent to setting this property to “flex: 00 auto’
flex-grow： Set up a flex Of the main dimensions of the item flex Growth coefficient . It designates flex How much free space in the container should be allocated to the project （flex Growth coefficient ）. Invalid negative value , The default is 0.
flex -shrink： It specifies flex The contraction rules of elements .flex The element only shrinks when the sum of the default widths is greater than the container , The size of its contraction is based on flex-shrink Value . Negative values are not allowed .
flex-basis： It specifies flex The initial size of the element in the principal axis direction . If not used box-sizing Change the box model , Then this attribute determines flex Content box for elements （content-box） The size of the .

The following code shows flex Property usage ：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex attribute </title>
    <style> .container{
      height: 300px; border: 1px solid black; margin-top: 10px; width: 500px; display: flex; } .container div{
      width: 200px; height: 100px; } .container div:nth-child(1){
      background-color: darkviolet; /*  Do nothing about  */ flex: none; } .container div:nth-child(2){
      background-color: lightgreen; /*  Automatically fills all empty spaces in the parent container element  */ flex: auto; } .container div:nth-child(3){
      background-color: red; /* flex-grow attribute - Telescopic term   Objective stretch factor   value ： <1 ——  The area occupied is less than equal  =1 ——  Divide equally with other expansion projects  >1 ——  The area occupied is greater than equal  */ flex-grow: 1; } .container div:nth-child(4){
      background-color: blue; /*  This attribute must be valid when the sum of the widths of all child elements is greater than the width of the container  flex-shrink attribute  ——  Shrink rules for scaling items   value ： <1 ——  The area occupied is less than equal  =1 ——  Divide equally with other expansion projects  >1 ——  The area occupied is greater than equal  */ flex-shrink: .5; } </style>
</head>
<body>
    <!--  Implement the elastic box model HTML structure  ->  The structure of parents and children  -->
    <div class="container">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

The effect drawing is shown below ：

By using flex Property can be very simple to implement three column layout , Fixed width + The adaptive + Fixed width ：

The code is as follows ：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex Property to achieve three column layout adaptation </title>
    <style> .container{
      height: 300px; border: 1px solid black; margin-top: 10px; display: flex; } .container div{
      width: 200px; height: 100px; } .container div:nth-child(1){
      background-color: darkviolet; } .container div:nth-child(2){
      background-color: lightgreen; /*  Very simple implementation of three column layout , Fixed width + The adaptive + Fixed width  */ flex: auto; } .container div:nth-child(3){
      background-color: red; } </style>
</head>
<body>
    <!--  Implement the elastic box model HTML structure  ->  The structure of parents and children  -->
    <div class="container">
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

design sketch ：

flex Property can also simply realize the three column equally divided layout

The code is as follows ：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex Property to realize the three column bisection layout </title>
    <style> .container{
      height: 300px; border: 1px solid black; margin-top: 10px; display: flex; } .container div{
      width: 200px; height: 100px; /*  Very simple realization of equal width layout  */ flex: 1; } .container div:nth-child(1){
      background-color: darkviolet; } .container div:nth-child(2){
      background-color: lightgreen; } .container div:nth-child(3){
      background-color: red; } </style>
</head>
<body>
    <!--  Implement the elastic box model HTML structure  ->  The structure of parents and children  -->
    <div class="container">
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

design sketch ：

align-self attribute

CSS align-self Properties apply to the expansion container elements , Sets the self alignment of the elements on the project side .

align-self: center| flex-start | flex-end | baseline| stretch

center: Alignment of the expansion project to the middle of the side axis .
flex-start: Alignment of the starting point of the lateral axis of the expansion project .
flex-end: Alignment of expansion items towards the end of the side axis .
baseline: The expansion project is aligned according to the baseline of the expansion project .
stretch: The default value is , The expansion project stretches to fill the entire expansion container .

align-self The sample code for the property is as follows ：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>align-self attribute </title>
    <style> .container{
      height: 300px; border: 1px solid black; margin-top: 10px; display: flex; } .container div{
      width: 200px; height: 100px; } .container div:nth-child(1){
      background-color: darkviolet; /* align-self attribute   effect ： Set the alignment of a specific telescopic item in the current telescopic container at the side head   usage ： Applied to the elements of the scaling project  */ align-self:flex-start } .container div:nth-child(2){
      background-color: lightgreen; align-self:center } .container div:nth-child(3){
      background-color: red; align-self:flex-end } .container div:nth-child(4){
      background-color: blue; align-self:baseline } .container div:nth-child(5){
      background-color: orange; align-self:stretch } </style>
</head>
<body>
    <!--  Implement the elastic box model HTML structure  ->  The structure of parents and children  -->
    <div class="container">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

The effect is shown below ：

order attribute

CSS order Properties are available for scaling projects , Used to set the order of scaling items when they are laid out .

order: <integer>

integer: Represents the order in which the current scaling project is located .

order The attribute sample code is as follows ：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>order attribute </title>
    <style> .container{
      height: 300px; border: 1px solid black; margin-top: 10px; display: flex; } .container div{
      width: 200px; height: 100px; } .container div:nth-child(1){
      background-color: darkviolet; /* order attribute ： Set the order of scaling items  */ order: 3; } .container div:nth-child(2){
      background-color: lightgreen; order: 1; } .container div:nth-child(3){
      background-color: red; order: 2; } </style>
</head>
<body>
    <!--  Implement the elastic box model HTML structure  ->  The structure of parents and children  -->
    <div class="container">
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>