Example code for evenly distributing elements using css3 flex layout

This article mainly introduces how to evenly distribute elements using CSS3 flex layout. I'll leave a note for myself and share it with you. The details are as follows:

Example 1:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
    <title>Flex Layout</title>
  <style> 
    *{
      padding:0;
      margin:0;
    }
    body,html{
      height: 100vh;
      min-width: 800px;
    } 
    .container{
      display:flex;
      flex-wrap:wrap;
      display: -webkit-flex; /* Safari */
    }
    .container>.item{
      border: 1px solid black;
      flex:1; 
      height:100px;
      background: #abcdef;
    }
  </style>
</head>
<body>
  <div class="container">  
    <div class="item"></div>
    <main class="item"></main>
    <div class="item"></div>
  </div>
</body>
</html>

Example 2:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
    <title>Flex Layout</title>
  <style> 
    *{
      padding:0;
      margin:0;
      box-sizing: border-box;
    }
    body,html{
      width: 100%;
      height: 100vh;
      min-width: 800px;
      display:flex;
      display: -webkit-flex; /* Safari */
      justify-content: center;
      align-items: center;
    } 
    .container{
      width: 300px;
      height: 300px;
      display:flex;
      display: -webkit-flex; /* Safari */
      flex-wrap: wrap;
    }
    .container>.item{
      flex:0 0 33.3%; 
      height:100px;
      background: #abcdef;
      border: 1px solid red;
    }
    main{
      flex:0 0 33.3%; 
      height:100px;
      background-color: #ccc;
      border: 1px solid red;
    }
  </style>
</head>
<body>
  <div class="container">  
    <div class="item">left</div>
    <main>main</main>
    <div class="item">right</div>
    <div class="item">left</div>
    <main>main</main>
    <div class="item">right</div>
    <div class="item">left</div>
    <main>main</main>
    <div class="item">right</div>
  </div>
</body>
</html>

flex:0 0 33.3% is equivalent to flex-basis:33.3%, which makes the width of each element 33.3% of the outer container, so a maximum of three elements can be arranged in each row.

flex-wrap:wrap means that each line will automatically wrap when it is full.

Example 3:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
    <title>Flex Layout</title>
  <style> 
    *{
      padding:0;
      margin:0;
      box-sizing: border-box;
    }
    body,html{
      width: 100%;
      height: 100vh;
      min-width: 800px;
      display:flex;
      display: -webkit-flex; /* Safari */
      justify-content: center;
      align-items: center;
    } 
    .container{
      width: 300px;
      height: 300px;
      margin: 50px;
      display:flex;
      display: -webkit-flex; /* Safari */
      flex-wrap: wrap;
      justify-content: space-between;
    }
    .container>.item{
      flex:0 0 30%; 
      height:90px;
      background: #abcdef;
      border: 1px solid red;
    }
    main{
      flex:0 0 30%; 
      height:90px;
      background-color: #ccc;
      border: 1px solid red;
    }
  </style>
</head>
<body>
  <div class="container">  
    <div class="item">left</div>
    <main>main</main>
    <div class="item">right</div>
    <div class="item">left</div>
    <main>main</main>
    <div class="item">right</div>
    <div class="item">left</div>
    <main>main</main>
    <div class="item">right</div>
  </div>
</body>
</html>

justify-content:space-between means that the extra space in the main axis direction is evenly distributed between two items.

This concludes this article about sample code for evenly distributing elements using CSS3 flex layout. For more information on evenly distributing elements using flex, please search previous articles on 123WORDPRESS.COM or continue browsing the following related articles. I hope you will support 123WORDPRESS.COM in the future!

<<: Detailed View of Hidden Columns in MySQL

>>: Use thead, tfoot, and tbody to create a table