Some common cases of flex layout

Meeting you at a young age is my greatest luck. Thank you for being close to me, understanding me, healing me, accompanying me. Thank you for loving me.

What is flex: it is a flexible layout. (note this bullet)
Complete list of flex attribute values: https://blog.csdn.net/qq_32442973/article/details/121141562
Although there are many flex attributes, there are only a few commonly used. If you know the following layouts, you can complete 99% of the layout problems.

For better understanding of the following cases, reset styles need to be set:

*{
  padding: 0;
  margin: 0;
}

1. flex sets the vertical and horizontal center alignment of elements

<template>
  <div id="app">
    <div class="demo">
      <div class="inner">
        <p>This is a test</p>
      </div>
    </div>
  </div>
</template>

<style lang="scss">
.demo {
  width: 500px;
  height: 300px;
  border: 1px solid purple;
  display: flex; /*Set as flex layout*/
  justify-content: center; /*horizontally*/
  align-items: center; /*Vertical center*/
}
.inner {
  width: 160px;
  height: 160px;
  font-size: 26px;
  border: 1px solid red;
}
</style>


Demo = > innder = > p has a three-tier structure. Flex is set in the demo, which does not affect p. this is what I told you about flex, which only affects the presentation point of the next level.

2. Make navigation bar with flex layout

In the past, when writing the navigation bar, it was always implemented with float or display: inline block, but these two methods will have various problems. For example, floating will affect the style of parent elements and brother elements, so you need to clear floating.

Now it will be very convenient to use flex, and it is an elastic layout.

<template>
  <div id="app">
    <ul>
      <li>music</li>
      <li>Movies</li>
      <li>Travel</li>
    </ul>
  </div>
</template>

<style lang="scss">
ul{
  display: flex;         
}
li{
  flex: 1;/*Let the elements occupy the remaining space. If each is 1, divide it equally*/
  text-align: center;
  line-height: 100px;
  cursor: pointer;
  background: #999;
  border: 1px solid #fff;
  box-sizing: border-box;
}
</style>


Let me add two more li:

Look, it's still divided equally.

3. Sometimes it is necessary to make the text style on the left and right, as shown in the following figure:

Remember one thing: the layout is nothing more than top, middle and bottom, left, middle and right. The first thing to do when you get the ui diagram is to split the ui diagram into top, middle and bottom or left, middle and right forms.

The picture on the left also reads:

<template>
  <div id="app">
    <div class="demo">
      <div class="left"></div>
      <div class="right">
          <p>Iphone7 PLUS XXXXXXXXXX</p>
          <span>Total number 99</span>
          <span>Remaining 33</span>
          <div class="btn">Participate now</div>
      </div>
    </div>
  </div>
</template>

<style lang="scss">
.demo{
  display: flex;/*Set as flex layout*/
  justify-content: space-between;//Left and right layout
}
.left{
  width: 100px;
  height: 100px;
  background: #d4cdcd;
}
.right{
  flex: 1;
  width: 380px;
  height: 100px;
  padding: 10px 15px;
  background: #fff;
  p{
    margin-bottom: 10px;
  }
  .btn{
    margin-top: 10px;
    background: blue;
    padding: 5px;
    width: 100px;
    text-align: center;
    color: #fff;
  }
}
</style>

You can even multi column layouts:

<template>
  <div id="app">
    <div class="demo">
      <div class="left"></div>
      <div class="mid">
        <p>description</p>
        <p>description</p>
        <p>description</p>
      </div>
      <div class="right">
          <div class="btn">confirm</div>
          <div class="btn">cancel</div>
      </div>
    </div>
  </div>
</template>

<style lang="scss">
.demo{
  display: flex;/*Set as flex layout*/
  justify-content: space-between;//Left and right layout
}
.left{
  width: 100px;
  height: 100px;
  background: #d4cdcd;
}
.mid{
  background: #fff;
  flex: 1;/*The middle let him occupy the remaining width */
  padding: 10px 10px;
}
.right{
  width: 120px;
  height: 100px;
  padding: 10px 15px;
  background: #fff;
  p{
    margin-bottom: 10px;
  }
  .btn{
    margin-top: 10px;
    background: blue;
    padding: 5px;
    width: 100px;
    text-align: center;
    color: #fff;
  }
}
</style>

4. Fixed percentage layout:

(1) Bisection layout

<template>
  <div id="app">
    <div class="demo">
      <div class="item item1">1/4</div>
      <div class="item item2">2/4</div>
      <div class="item item3">3/4</div>
      <div class="item item4">4/4</div>
    </div>
  </div>
</template>

<style lang="scss">
.demo{
  display: flex;             
}
.item{
  flex: 1;
  background: #fff;
  border: 1px solid #999;
  box-sizing: border-box;
  height: 40px;
}
</style>

(2) A fixed

<template>
  <div id="app">
    <div class="demo">
      <div class="item item1">auto</div>
      <div class="item item2">1/2</div>
      <div class="item item3">auto</div>
      <div class="item item4">auto</div>
    </div>
  </div>
</template>

<style lang="scss">
.demo{
  display: flex;             
}
.item{
  height: 40px;
  background: #fff;
  border: 1px solid #999;
}
.item{
  flex: 1;
}
.item2{
  flex: 0 0 50%;
}
</style>

(3) Two fixed

<template>
  <div id="app">
    <div class="demo">
      <div class="item item1">auto</div>
      <div class="item item2">1/2</div>
      <div class="item item3">auto</div>
      <div class="item item4">1/5</div>
    </div>
  </div>
</template>

<style lang="scss">
.demo{
  display: flex;             
}
.item{
  height: 40px;
  background: #fff;
  border: 1px solid #999;
  flex: 1;
}
.item2{
  flex: 0 0 50%;
}
.item4{
  flex: 0 0 20%;
}
</style>

(4) Three fixed

<template>
  <div id="app">
    <div class="demo">
      <div class="item item1">1/10</div>
      <div class="item item2">1/2</div>
      <div class="item item3">auto</div>
      <div class="item item4">1/5</div>
    </div>
  </div>
</template>

<style lang="scss">
.demo{
  display: flex;             
}
.item{
  height: 40px;
  background: #fff;
  border: 1px solid #999;
  flex: 1;
}
.item1{
  flex: 0 0 10%;
}
.item2{
  flex: 0 0 50%;
}
.item4{
  flex: 0 0 20%;
}
</style>

5. Grail layout, as shown in the figure

<template>
  <div class="demo">
    <div class="header">head</div>
    <div class="body">
      <div class="left">left</div>
      <div class="center">center</div>
      <div class="right">right</div>
    </div>
    <div class="footer">bottom</div>
  </div>
</template>

<style lang="scss">
.demo{
  display: flex;
  flex-direction: column; 
  height: 100vh;           
}
.demo div{
  flex: 1;
}
.body{
  display: flex;  
} 
.header,.footer,.left,.right{
  flex: 0 0 20%!important;
}

.header{
  background: #999;
}
.body{
  .left{
    background: gainsboro;
  }
  .center{
    background: pink;
  }
  .right{
    background: peachpuff;
  }
}
.footer{
  background: #999;
}
</style>

6. Input box layout

Sometimes you need to add a prompt at the front of the input box or a button at the back, as shown in the figure:

<template>
  <div class="demo">
   <span class="tip">icon</span>
   <input type="text" name="" />
   <button>search</button>
</div>
</template>

<style lang="scss">
.demo{
  display: flex;
  height: 40px;
}
.tip{
  width: 20px;
  height: 100%;
  line-height: 40px;
  text-align: center;
}
input{
  flex:1;
}
</style>

7. The bottom footer is fixed at the bottom, but not fixed

The fixed bottom bar is often used in the page, but when the page content is too small, the footer will go to the middle of the page. The following is solved with flex

<template>
  <div class="demo">
   <div class="main">
      <p>I am the content</p>
   </div>
   <div class="footer">This is the bottom</div>
</div>
</template>

<style lang="scss">
.demo{
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}
.main{
    flex: 1;
    background: #fff;
    padding: 30px;
}
.footer{
    width: 100%;
    height: 120px;
    background: #333;
    color: #ffff;
    line-height: 120px;
    text-align: center;
    flex-shrink: 0;
}
</style>

8. Flow layout, as shown below:



Any number of them will be arranged in order. Oh, I didn't know when I told you last time. I've seen them recently.

<template>
  <div class="demo">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</template>

<style lang="scss">
.demo{
    width: 100%;
    height: 300px;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
}
.item{
    flex: 0 0 33.333333%;
    height: 137px;
    box-sizing: border-box;
    background: red;
    border: 1px solid #999;
    box-sizing: border-box;
}
</style>

Tags: css3 html css

Posted on Mon, 29 Nov 2021 17:04:26 -0500 by lando