Flex layout

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

Flex layout definition:

Flex, short for Flexible Box, is designed to provide maximum flexibility to boxed models. Any container can be specified as a Flex layout. The Flex layout has two values:

  • display:flex; Represents the block level
  • display:inline-flex; This is the inline block

Basic Flex layout concepts

Elements with a Flex layout are called Flex containers, or “containers” for short. All of its child elements automatically become container members and are called Flex items, or “items.”

Container properties

  • Flex-direction property: Sets the spindle direction
  • Row: The direction of the spindle is horizontal, from left to right
  • Column: The direction of the main axis is vertical, from top to bottom
  • Row-reverse: The orientation of the main axis is horizontal, right to left

<! DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> *{ margin:0; padding:0; } ul,ol{ list-style: none; } ul{ display:flex; /* flex-direction: row; */ /* flex-direction: column; */ /* flex-direction: row-reverse; */ flex-direction: column-reverse; } ul>li{ width:100px; height:100px; background:green; margin-left:10px; } </style> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> </body> </html>Copy the code

flex-wrap:

  • Wrap: a newline
  • Nowrap: No line breaks (default)
  • Wrap-reverse: newline, but the first line is at the bottom

flex-flow

The flex-flow property is a short form of the flex-direction and flex-wrap properties. The default value is Row Nowrap. flex-flow:row wrap; With this in mind, the following example will have the same effect as the previous one

<! DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>flex-flow</title> <style> *{ margin:0; padding:0; } /* flex-flow is flex-direction */ ul,ol{list-style: none; } ul{ display:flex; flex-flow:row wrap } ul>li{ width:400px; height:400px; background:green; margin-left:10px; margin-bottom:10px; } </style> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> </ul> </body> </html>Copy the code

The context-content attribute defines the alignment of items on the main axis.

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

Align-items property: The align-items property defines how items are aligned on the cross axis.

align-items: flex-start | flex-end | center | baseline | stretch; Stretch (default) : If the height is not set or auto is set, the project will occupy the entire height of the container.

The align – content attribute

The align-content property defines the alignment of multiple axes. This property has no effect if the project has only one axis. (that is, to have project a newline). The box {align – content: flex – start | flex – end | center | space – between | space – around | stretch; }

The following six properties are set on the project

+ ORDER: The order property defines the order of items. The smaller the value is, the more advanced it is. The default value is 0.

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

  • The flex – the shrink attributes:
  • 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.

  • The Flex-basis property: 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. It can be set to the same value as the width or height attribute (such as 350px), and the project will take up a fixed space.
.item {
flex-basis: <length> | auto; /* default auto */
}
Copy the code

Flex properties:

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

Flex: 0 1 auto; Default flex: None; Flex: 0 0 auto; Flex: auto; Flex: 1 1 auto; Flex: number; When flex is a non-negative number, the number is the flex-grow value, the flex-shrink value is 1, and the flex-basis value is 0%.

The align – self properties

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

The holy grail layout

<! DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
    *{
        margin:0;
        padding:0;
    }
    body{
        min-width:600px;
    }
    .container{
        height:500px;
        padding:0 200px;
        box-sizing: border-box;
    }
    .container>div{
        height:100%;
        float:left;
    }
    .main{
        width:100%;
        background:pink;
    }
    .left{
        width:200px;
        background:lightblue;
        margin-left:-100%;
        position:relative;
        left:-200px;
    }
    .right{
        width:200px;
        background:lawngreen;
        margin-left:-200px;
        position:relative;
        left:200px;
    }
</style>
</head>
<body>
<div class="container">
<div class="main">main</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
Copy the code

Twin wing layout

<! DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
    *{
        margin:0;
        padding:0;
    }
    body{
        min-width:600px;
    }
    .container{
        height:500px;
    }
    .container>div{
        height:100%;
        float:left;
    }
    .main{
        width:100%;
        padding:0 200px;
        background:pink;
        box-sizing: border-box;
    }
    .left{
        width:200px;
        background:green;
        margin-left:-100%;
    }
    .right{
        width:200px;
        background:hotpink;
        margin-left:-200px;
    }
</style>
</head>
<body>
    <div class="container">
        <div class="main">
            <div class="inner">
                inner
            </div>
        </div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</body>
</html>
Copy the code