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
Windows Server 2019 IIS10.0+PHP(FastCGI)+MySQL Environment Construction Tutorial
Preparation 1. Environmental Description: Operati...
React Class component life cycle and execution order
1. Two ways to define react components 1. Functio...
CSS position fixed left and right double positioning implementation code
CSS Position The position attribute specifies the...
HTML Tutorial: Collection of commonly used HTML tags (6)
These introduced HTML tags do not necessarily ful...
Introduction to new ECMAscript object features
Table of contents 1. Object properties 1.1 Attrib...
MySQL Database Basics: A Summary of Basic Commands
Table of contents 1. Use help information 2. Crea...
Teach you step by step to configure MySQL remote access
Preface When using the MySQL database, sometimes ...
Notes on configuring multiple proxies using vue projects
In the development process of Vue project, for th...
A brief analysis of Linux network programming functions
Table of contents 1. Create a socket 2. Bind sock...
Solution to the horizontal scroll bar in iframe under IE6
The situation is as follows: (PS: The red box repr...
In-depth explanation of the style feature in Vue3 single-file components
Table of contents style scoped style module State...
Instance method for mysql string concatenation and setting null value
#String concatenation concat(s1,s2); concatenate ...
Vue3 setup() advanced usage examples detailed explanation
Table of contents 1. Differences between option A...
About using Alibaba's iconfont vector icon in Vue
There are many import methods on the Internet, an...
Detailed explanation of the principle and example of the new operator in JavaScript
Uses of new The function of new is to create an i...