Make writing a habit together! This is the sixth day of my participation in the “Gold Digging Day New Plan · April More text Challenge”. Click here for more details

What is the Flex layout

  • Flex, short for Flexible Box, is designed to provide maximum flexibility to boxed models.
  • The Flexbox module provides an efficient layout method that allows intelligent, flexible adjustment and allocation of elements and Spaces, even without knowledge of window size or unknown elements. Simply understand, can automatically adjust, calculate the size of the element in the container space.

How do I get started using Flex

  1. To use Flex, you need to make the parent element a Flex container by setting the display property of the parent element to Flex, and that’s it

    <! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, > <title>Use Flex</title> </head> <body> <! - the default - > < div id = "default" > < div class = "item" > default < / div > < div class = "item" > 1 < / div > < div class = "item" > 2 < / div > < div class="item">3</div> </div> <! -- Flex --> <div id="flex"> <div class="item">flex</div> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div> <style> #default{ border: 1px solid #999; margin-bottom: 20px; } #default .item{ width: 100px; height: 100px; background-color: tomato; margin: 10px; } #flex{ display: flex; border: 1px solid #999; } #flex .item{ width: 100px; height: 100px; background-color: thistle; margin: 10px; } </style> </body> </html>Copy the code

  2. Key words:

    • Flex container: the parent element display is set to display: Flex
    • Flex project: A child project within the Flex container

Flex container properties

  • Flex-direction: controls the alignment direction of items
  • Flex-wrap: Controls the line break rule
  • Flex-flow: short for direction and wrap
  • Context-content: Alignment of items on the main axis
  • Align-items: Alignment of items on the cross axis
  • Align-content: Alignment of multiple axes, not in a single axis

1. flex-direction

Function: control the direction of the items along the main axis

Default value: row

Values: flex – direction: row | column | row – reverse | column – reverse

Row: Default value, arranged along the main axis of the method

Column: arranged along the direction of the intersecting axis

Row-reverse: rows are arranged in reverse directions along the main axis

Column-reverse: aligns in the opposite direction along the intersecting axis

Example:

Code examples:

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, "> <title>Felx Demo</title> </head> <body> <! -- flex-direction: row --> <div class="root1"> <div class="item">flex-direction: The row (the default) < / div > < div class = "item" > 1 < / div > < div class = "item" > 2 < / div > < div class = "item" > 3 < / div > < / div > <! -- flex-direction: cloumn --> <div class="root2"> <div class="item">flex-direction: column</div> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div> <! -- flex-direction: row-reverse --> <div class="root3"> <div class="item">flex-direction: row-reverse</div> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div> <! -- flex-direction: column-reverse --> <div class="root4"> <div class="item">flex-direction: column-reverse</div> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div> <style> .root1{ display: flex; flex-direction: row; margin-bottom: 30px; border: 1px solid #999; } .root1 .item{ width: 100px; height: 100px; background-color: yellowgreen; margin: 10px; } .root2{ display: flex; flex-direction: column; margin-bottom: 30px; border: 1px solid #999; } .root2 .item{ width: 100px; height: 100px; background-color: yellowgreen; margin: 10px; } .root3{ display: flex; flex-direction: row-reverse; margin-bottom: 30px; border: 1px solid #999; } .root3 .item{ width: 100px; height: 100px; background-color: yellowgreen; margin: 10px; } .root4{ display: flex; flex-direction: column-reverse; margin-bottom: 30px; border: 1px solid #999; } .root4 .item{ width: 100px; height: 100px; background-color: yellowgreen; margin: 10px; } </style> </body> </html>Copy the code

2. flex-wrap

Effect: Controls the item line break rule

Default value: nowrap

Values: flex – wrap: nowrap | wrap | wrap – reverse

Row: Default, no newline (content will be compressed automatically if the width is insufficient)

Wrap: Normal line wrap

Wrap-reverse: indicates an upward line wrap

Example:

Code examples:

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, "> <title>flex-wrap-demo</title> </head> <body> <! -- flex-wrap: wrap-reverse --> <div id="root1"> <div class="item">flex-wrap: wrap-reverse</div> <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> <! -- flex-wrap: wrap --> <div id="root2"> <div class="item">flex-wrap: wrap</div> <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> <! <div id="root3"> <div class="item">flex-wrap: nowrap</div> <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> <style> #root1{ display: flex; flex-wrap: wrap-reverse; border: 1px solid #999; margin-bottom: 10px; } #root1 .item{ width: 100px; height: 100px; background-color: violet; margin: 10px; } #root2{ display: flex; flex-wrap: wrap; border: 1px solid #999; margin-bottom: 10px; } #root2 .item{ width: 100px; height: 100px; background-color: violet; margin: 10px; } #root3{ display: flex; flex-wrap: nowrap; border: 1px solid #999; margin-bottom: 10px; } #root3 .item{ width: 100px; height: 100px; background-color: violet; margin: 10px; } </style> </body> </html>Copy the code

3.flex-flow

Action: Short for direction and wrap

Default value: row nowrap

Value: flex-wrap: specifies the direction and wrap

Direction: row | column | row – reverse | column – reverse

Wrap: nowrap | wrap | wrap – reverse

4.justify-content

Action: Alignment of items on the main axis

Default value: flex-start

Value: the justify – content: flex – start | flex – end | center | space – between | space – around

Flex-start: align to the beginning of the spindle

Flex-end: aligned towards the end of the spindle

Center: center

Space-between: aligns both ends

Space-around: Only the space between Flex elements is equal. The space between the first Flex element and the last Flex element and container is one half of the space between flex elements

Space-instituted: equality of elements and space between elements

Space-around and space-instituted:

Example:

Code examples:

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, <title>justify -demo</title> </head> <body> <! -- justify-content: flex-start --> <div id="root1"> <div class="item">justify-content: flex-start</div> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div> <! -- justify-content: flex-end --> <div id="root2"> <div class="item">justify-content: flex-end</div> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div> <! -- justify-content: center --> <div id="root3"> <div class="item">justify-content: center</div> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div> <! -- justify-content: space-between --> <div id="root4"> <div class="item">justify-content: space-between</div> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div> <! -- justify-content: space-around --> <div id="root5"> <div class="item">justify-content: space-around</div> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div> <! -- justify-content: space-evenly --> <div id="root6"> <div class="item">justify-content: space-evenly</div> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div> <style> #root1{ display: flex; justify-content: flex-start; border: 1px solid #999; margin: 20px; } #root1 .item{ width: 100px; height: 100px; background-color: cadetblue; margin: 10px; } #root2{ display: flex; justify-content: flex-end; border: 1px solid #999; margin: 20px; } #root2 .item{ width: 100px; height: 100px; background-color: cadetblue; margin: 10px; } #root3{ display: flex; justify-content: center; border: 1px solid #999; margin: 20px; } #root3 .item{ width: 100px; height: 100px; background-color: cadetblue; margin: 10px; } #root4{ display: flex; justify-content: space-between; border: 1px solid #999; margin: 20px; } #root4 .item{ width: 100px; height: 100px; background-color: cadetblue; margin: 10px; } #root5{ display: flex; justify-content: space-around; border: 1px solid #999; margin: 20px; } #root5 .item{ width: 100px; height: 100px; background-color: cadetblue; margin: 10px; } #root6{ display: flex; justify-content: space-evenly; border: 1px solid #999; margin: 20px; } #root6 .item{ width: 100px; height: 100px; background-color: cadetblue; margin: 10px; } </style> </body> </html>Copy the code

5.align-items

Action: Alignment of items on cross axes

Default value: stretch

Values: align – items: flex – start | flex – end | center | stretch | baseline

Flex-start: Cross axis alignment in the beginning direction

Flex-end: align towards the end of the cross axis

Center: center

Stretch: To stretch an item to the length of the container

Baseline: Align along the bottom of the first line of text in the project

Example:

Code examples:

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, <title>align-items-demo</title> </head> <body> <! -- align-item: flex-start --> <div id="root1"> <div class="item">align-item: flex-start</div> <div class="item" style="height: 30px;" >1</div> <div class="item" style="height: 40px">2</div> <div class="item" style="height: 80px;" >3</div> </div> <! -- align-item: flex-end --> <div id="root2"> <div class="item">align-item: flex-end</div> <div class="item" style="height: 30px;" >1</div> <div class="item" style="height: 40px">2</div> <div class="item" style="height: 80px;" >3</div> </div> <! -- align-item: center --> <div id="root3"> <div class="item">align-item: center</div> <div class="item" style="height: 30px;" >1</div> <div class="item" style="height: 40px">2</div> <div class="item" style="height: 80px;" >3</div> </div> <! -- align-item: stretch --> <div id="root4"> <div class="item">align-item: stretch</div> <div class="item" style="height: 30px;" >1</div> <div class="item" style="height: 40px">2</div> <div class="item" style="height: 80px;" >3</div> </div> <! -- align-item: baseline --> <div id="root5"> <div class="item">align-item: baseline</div> <div class="item" style="height: 30px;" >1</div> <div class="item" style="height: 40px">2</div> <div class="item" style="height: 80px;" >3</div> </div> <style> #root1{ display: flex; align-items: flex-start; background-color: silver; margin-bottom: 20px; } #root1 .item{ width: 300px; background-color: blueviolet; margin: 10px; } #root2{ display: flex; align-items: flex-end; background-color: silver; margin-bottom: 20px; } #root2 .item{ width: 300px; background-color: blueviolet; margin: 10px; } #root3{ display: flex; align-items: center; background-color: silver; margin-bottom: 20px; } #root3 .item{ width: 300px; background-color: blueviolet; margin: 10px; } #root4{ display: flex; align-items: stretch; background-color: silver; margin-bottom: 20px; } #root4 .item{ width: 300px; background-color: blueviolet; margin: 10px; } #root5{ display: flex; align-items: baseline; background-color: silver; margin-bottom: 20px; } #root5 .item{ width: 300px; background-color: blueviolet; margin: 10px; } </style> </body> </html>Copy the code

6.align-content

Action: How items are arranged in a container

Default value: stretch

Values: align – content: flex – start | flex – end | stretch | baseline

Flex-start: Cross axis alignment in the beginning direction

Flex-end: align towards the end of the cross axis

Center: center

Stretch: Stretches items to fit into the flex container space

Example:

No sample

Code examples:

 <style>
     #box{
         display: flex;
         align-content: flex-start;
         /* align-content: flex-end; */
         /* align-content: center; */
         /* align-content: stretch; */
         flex-flow: row wrap;
         background-color: silver;
         height: 700px;
    }
     .item{
         width: 250px;
         height: 250px;
         background-color: blueviolet;
         margin: 8px;
 ​
    }
 </style>
 ​
 <div id="box">
     <div class="item"><h1>1</h1></div>
     <div class="item"><h1>2</h1></div>
     <div class="item"><h1>3</h1></div>
     <div class="item"><h1>4</h1></div>
     <div class="item"><h1>5</h1></div>
     <div class="item"><h1>6</h1></div>
     <div class="item"><h1>7</h1></div>
     <div class="item"><h1>8</h1></div>
     <div class="item"><h1>9</h1></div>
 </div>
Copy the code

Flex project properties

  • Order: Sorts the items in the Flex container
  • The flex – turns up:
  • The flex – the shrink:
  • The flex – the basis:

1.order

Function: The display order of items can be changed by setting the order value

Default value: 0

Rule: Flex will order items from lowest to highest based on their order value, and if they have the same order value, the first item will be first in HTML

Example:

Code examples:

 <style>
     #box{
         display: flex;
         flex-flow: row wrap;
         background-color: silver;
    }
    .item{
         width: 100px;
         height: 100px;
         background-color: blueviolet;
         margin: 8px;
    }
     div:nth-child(1){
         order: 1;
    }
 </style>
 ​
 <div id="box">
         <div class="item"><h1>1</h1></div>
         <div class="item"><h1>2</h1></div>
         <div class="item"><h1>3</h1></div>
         <div class="item"><h1>4</h1></div>
         <div class="item"><h1>5</h1></div>
 </div>
Copy the code

2. The flex – turns and flex – the shrink

Action: Zoom in and out of items in the Flex container

Rule: They can both accept 0 or positive numbers greater than 0

Default: The default value of flex-grow is 0, and the default value of flex-shrink is 1

Note: A value of 0 indicates that the zoom in and zoom out switch is off; otherwise, it is on

Example:

Code examples:

     <style>
          #box{
              display: flex;
              flex-flow: row wrap;
              background-color: silver;
          }
          .item{
              width: 100px;
              height: 100px;
              flex-grow: 1;
              background-color: blueviolet;
          }
     </style>
     <div id="box">
         <div class="item"><h1>1</h1></div>
     </div>
Copy the code

3.flex-basis

Description: Specifies the initial size of the project

Default value: auto, calculated by content

Note: for a value of 0, you also write the unit, 0px

Example:

Code examples:

<style> #box{ display: flex; flex-flow: row wrap; background-color: silver; } .item{ background-color: blueviolet; flex-basis: 200px; } </style> <div id="box"> <div class="item"> Hello, I like to play basketball</div> </div>Copy the code

4.flex

Meaning: Short for flex-grow, flex-shrink, or flex-basis

Order: Flex-grow first, flex-shrink second, flex-basis third

Default: flex: 0,1, auto;

Note: If the flex-basis value is not set, the default value is 0, which is the absolute flex item. If the flex-basis value is set, it is a relative Flex item

Useful Flex values:

  • Flex: 0,1, auto; The default value
  • Flex: 0,0, auto; Like a fixed element, the size of the element does not change with the browser window
  • Flex: 1,1, auto; Projects zoom in and out as the Flex container and browser window change

5.align-self

Function: for the cross axis position of a single project, does not affect other projects

Default value: stretch

Values: align – self: auto | flex – start | flex – end | stretch | baseline | center

Flex-start: Cross axis alignment in the beginning direction

Flex-end: align towards the end of the cross axis

Center: center

Stretch: Stretches items to fit into the flex container space

Baseline: Baseline alignment at the bottom of the first line of the project

Auto: Sets the align-self property of the target item to the value of the align-items of the parent element, or stretch if the element has no parent element

Example:

Code examples:

<style> #box{ display: flex; flex-flow: row wrap; background-color: silver; height: 500px; } .item{ background-color: blueviolet; flex-basis: 150px; height: 200px; margin: 10px; } .item:nth-child(1){ background-color: tomato; align-self: flex-end; /* align-self: flex-start; */ /* align-self: center; */ /* align-self: stretch; */ /* align-self: baseline; */ /* align-self: auto; </style> <div id="box"> <div class="item" </div> <div class="item">hello-world! -hwllo message</div> </div>Copy the code

Absolute and relative Flex projects

Difference: Spacing and how to calculate spacing

Relative items: The spacing of relative items is calculated according to its content size

Absolute items: Absolute items are calculated only based on flex properties, not content

Note: When flex’s third attribute, flex-basis, is equal to 0, it is an absolute item, otherwise it is a relative item

Explanation: For relative projects, more content takes up more space. For absolute projects, the amount of space taken up is independent of the content

Example:

Code examples:

<style> #box{ display: flex; flex-flow: row wrap; background-color: silver; height: 500px; } .item{ background-color:tomato; /* flex: auto; /* flex:1; */ margin: 10px; </style> <div id="box"> <div class="item"> A boat suoliweng, fishing alone cold river snow. Spring sleep is not aware of xiao, everywhere smell crow birds. Wind and rain at night, flowers fall to know how much. </div> <div class="item">hello world! </div> </div>Copy the code

6. Auto – margin alignment

  • Beware of using margin: Auto alignment in projects
  • When margin: Auto is used on a project, the project takes up all the remaining space

Example:

Code examples:

<style> #box{ display: flex; background-color: silver; list-style-type: none; width: 1000px; } li{ background-color:tomato; margin: 10px; Flex: 0, 0, auto; } li:nth-child(1){ /* margin-left: auto; */ /* margin-right: auto; */ margin: auto; } </style> <ul id="box"> <li>Home</li> <li>Study</li> <li>MyBlog</li> <li>life</li> <li>rest</li> </ul>Copy the code