Example code for evenly distributing elements using css3 flex layout

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

Recommend

How to configure Openbox for Linux desktop (recommended)

This article is part of a special series on the 2...

How to change MySQL character set utf8 to utf8mb4

For MySQL 5.5, if the character set is not set, t...

How to use IDEA to configure tomcat and create JSP files

Before using idea to write JSP files, you need to...

Vue page monitoring user preview time function implementation code

A recent business involves such a requirement tha...

Detailed explanation of how to enable slow query log in MySQL database

The database enables slow query logs Modify the c...

How to recover data after accidentally deleting ibdata files in mysql5.7.33

Table of contents 1. Scenario description: 2. Cas...

18 common commands in MySQL command line

In daily website maintenance and management, a lo...

Implementation of Nginx domain name forwarding https access

A word in advance: Suddenly I received a task to ...

A brief discussion on MySQL index design principles and the differences between common indexes

Index definition: It is a separate database struc...

Detailed explanation of the problem of failure to synchronize warehouse cache after changing yum source in CentOS8

Cause of the problem: At first, the default yum s...

How to create LVM for XFS file system in Ubuntu

Preface lvm (Logical Volume Manager) logical volu...

MySQL string splitting example (string extraction without separator)

String extraction without delimiters Question Req...

Solve the problem that ifconfig and addr cannot see the IP address in Linux

1. Install the Linux system on the virtual machin...

Pure CSS3 to achieve pet chicken example code

I have read a lot of knowledge and articles about...

The process of installing Docker in Linux system

In this blog, I will walk you through the process...