preface

Do you really know how to use Flex?

What else can Flex do besides be used as a vertical center?

This article is intended for readers who use Flex layouts for vertical centering and are not familiar with other uses of Flex

Automatic full height

First we create a container containing box1 and box2 items

<! DOCTYPEhtml>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
    <title>flex</title>
    <link rel="stylesheet" href="index.css">
  </head>
  <body>
    <div class="flex-container">
      <div class="box1"></div>
      <div class="box2"></div>
    </div>
  </body>
</html>

Copy the code

The CSS part

.flex-container{
  width:100vw;
  height:100vh;
  display:flex;
  flex-direction: column;
}

.flex-container .box1{
  width:100%;
  height:300px;
  background: red;
}

.flex-container .box2{
  width:100%;
  flex-grow: 1;
  flex-shrink: 1;
  background: green;
}
Copy the code

Simply set the main axis to column and the flex-grow and Flex -shrink attributes to 1

Multi-layer Flex automatic prop does not take effect

Let’s change the original DOM structure

<div class="flex-container">
      <div class="box1"></div>
      <div class="box2">
        <! Start -->
        <p>this is a p</p>
        <div class="box2_wrap">
          <ul>
            <li>this is text</li>
            <li>this is text</li>
            <li>this is text</li>
            <li>this is text</li>
            <li>this is text</li>
            <li>this is text</li>
            <li>this is text</li>
            <li>this is text</li>
            <li>this is text</li>
            <li>this is text</li>
            <li>this is text</li>
            <li>this is text</li>
            <li>this is text</li>
            <li>this is text</li>
            <li>this is text</li>
            <li>this is text</li>
            <li>this is text</li>
            <li>this is text</li>
            <li>this is text</li>
            <li>this is text</li>
            <li>this is text</li>
            <li>this is text</li>
            <li>this is text</li>
            <li>this is text</li>
            <li>this is text</li>
          </ul>
        </div>
        <! End -->
      </div>
    </div>
Copy the code

Our goal is to automatically stretch the box2_wrap and achieve the overflow scrolling effect expected

The CSS implementation code is as follows

.flex-container .box2{
  width:100%;
  flex:1;
  background: green;
  display:flex;
  flex-direction: column;
}

.flex-container .box2 p{
  height:200px;
  display:flex;
  justify-content:center;
  align-items:center;
}

.flex-container .box2_wrap{
  background:#fff;
  flex: 1;
  display:flex;
  flex-direction: column;
  overflow:auto;
}
Copy the code

Tip: Flex :1 is a contraction of flex-grow: 1 and flex-shrink: 1

The actual results are as follows

How to solve it?

Simply set box2’s height to 0

.flex-container .box2{
  width:100%;
  flex:1;
  background: green;
  display:flex;
  flex-direction: column;
  
  height:0// Set box2 height to0
}
Copy the code

Replace the line – height

We know that line-height can be used to set the line height

We have a UL 250px high with five Li’s in it

The ul height can be equalized by setting the li height to 50px

How to divide the ul height without knowing the ul height and the number of Li?

<div class="flex-container">
  <ul>
    <li>this is text</li>
    <li>this is text</li>
    <li>this is text</li>
    <li>this is text</li>
    <li>this is text</li>
  </ul>
</div>
Copy the code
.flex-container{
  width:100vw;
  height:100vh;
}

.flex-container ul{
  height:100%;
}

.flex-container ul li{
  background:yellow;
  border:2px solid #fff;
}
Copy the code

We can do this with flex’s flex-grow property automatically allocating free space to enlarge the item

.flex-container ul{
  height:100%;
  display:flex;
  flex-direction:column;
}

.flex-container ul li{
  background:yellow;
  border:2px solid #fff;
  flex-grow: 1;
  display:flex;
  justify-content:center;
  align-items:center;
}
Copy the code

The result is as follows

The sorting

Usually, the data we get from the background is out of order, so we can use flex’s Order property to display the items in order

Here is an example of a leaderboard

<div class="flex-container">
  <h5>list</h5>
  <ul>
    <li>The first name</li>
    <li>Second,</li>
    <li>The third</li>
  </ul>
</div>
Copy the code
.flex-container{
  width:100vw;
  height:100vh;
  padding-top:300px;
}

.flex-container h5{
  text-align:center;
  font-size:20px;
  margin-bottom:20px;
}

.flex-container ul{
  height:100%;
  display:flex;
  justify-content:center;
}

.flex-container ul li{
  width:100px;
  height:100px;
  line-height:100px;
  text-align:center;
  border-radius: 100%;
  background:yellow;
  margin:20px;
}

.flex-container ul li:nth-child(1) {order:1;
  position:relative;
  top: -20px;
}

.flex-container ul li:nth-child(2) {order:0;
}

.flex-container ul li:nth-child(3) {order:2;
}
Copy the code

conclusion

These are a few useful Flex tips

Remember to give a thumbs up if you think it’s a good idea! ❤ ️ ❤ ️ ❤ ️