CSS3 new layout: flex detailed explanation
|
Flex Basic Concepts Flex layout (flex is the abbreviation of flexible box), also known as the elastic box model. The tag style in which the attribute and attribute value (display:flex;) are written is the container; all its child elements automatically become container members, called items. When the display value of an element is flex, all items (child elements) will be displayed in one row; if the sum of the sizes of all items is larger than the container, it will not exceed the width and height of the parent element. No line wrapping (each item will automatically shrink in proportion).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Layout: flex</title>
<link rel="stylesheet" href="./CSS/normalize.css">
<style>
section {
width: 500px;
height: 800px;
border: 2px solid black;
margin: 50px auto;
display: flex;
}
div {
width: 100px;
height: 100px;
border: 1px solid tomato;
}
</style>
</head>
<body>
<section>
<div>01</div>
<div>02</div>
<div>03</div>
<div>04</div>
<div>05</div>
<div>06</div>
</section>
</body>
</html>Page effect: Each container is scaled down proportionally
There are two types of CSS codes: one is suitable for containers (setting the starting position of the main axis, line breaks, main axis alignment, and multi-axis alignment); the other is suitable for projects (setting the position of the project). Common properties and property values of containers Since there are a lot of repeated codes, I will not upload the codes one by one. You can do it yourself, type the code and try it out. 1. Set the starting direction of the main axis flex-direction: The default is X-axis (row):
<style>
section {
width: 500px;
height: 500px;
border: 2px solid black;
margin: 50px auto;
display: flex;
/* flex-direction: row; */
/* flex-direction: row-reverse; */
/* flex-direction: column; */
/* flex-direction: column-reverse; */
}
div {
width: 100px;
height: 100px;
border: 1px solid tomato;
}
</style>flex-direction:row; By default, the starting direction of the X axis is the starting position (placed from left to right); flex-direction:row-reverse; Change the starting direction of the X axis to the ending position (placed from right to left);
Set the starting direction of the main axis to the Y axis (column): flex-direction:column; By default, the starting direction of the Y axis is the starting position (placed from top to bottom) flex-direction:column-reverse; Change the starting direction of the Y axis to the end position (placed from bottom to top)
2. Set whether the item wraps flex-wrap: (default is no wrap)
<style>
section {
width: 400px;
height: 400px;
border: 2px solid black;
margin: 50px auto;
display: flex;
/* flex-wrap: wrap; */
/* flex-wrap: wrap-reverse; */
}
div {
width: 100px;
height: 100px;
border: 1px solid tomato;
}
</style>flex-wrap: nowrap; The default value is no line break; (n items will be displayed in one line. If the sum of the item sizes is larger than the size of the container's main axis, the items will automatically shrink accordingly.) (Refer to the first code page result display) flex-wrap: wrap; Set line break; (If it exceeds the width of the main axis, it will be wrapped. After the line break, there will be a gap between the two lines because there is remaining space in the vertical direction, which will be evenly distributed above and below the second line)
flex-wrap: wrap-reverse; wrap in reverse order; (if there are two lines, the second line is displayed in front and the first line is displayed in the back)
3. Alignment of the main axis direction: justify-content: A project is a:
<style>
section {
width: 400px;
height: 400px;
border: 2px solid black;
margin: 50px auto;
display: flex;
/* justify-content: flex-start; */
/* justify-content: flex-end; */
/* justify-content: center; */
}
div {
width: 100px;
height: 100px;
border: 1px solid tomato;
}
</style>justify-content:flex-start; Align with the main axis start direction (default) justify-content:flex-end; Align with the end direction of the main axis
justify-content:center; the main axis is centered
When the project is multiple:
<style>
section {
width: 500px;
height: 500px;
border: 2px solid black;
margin: 50px auto;
display: flex;
/* justify-content: space-between; */
/* justify-content: space-around; */
/* justify-content: space-evenly; */
}
div {
width: 100px;
height: 100px;
border: 1px solid tomato;
}
</style>justify-content: space-between; Align both ends (the first item is at the beginning of the container, the last item is at the end of the container, and the distance in between is equal)
justify-content: space-around; Distributed alignment
justify-content: space-evenly; divide the remaining space equally, and the distance between each item is the same
4. Alignment of the main axis to the cross axis direction One axis: The main axis needs to be changed to the Y axis: flex-direction: column; align-items: baseline; Align with the baseline of the first line of text in the item align-items: stretch; (If the item is not given a height, stretch is the default value. If the item is not set with a height, it is the height of the container)
<style>
section {
width: 500px;
height: 500px;
border: 2px solid black;
margin: 50px auto;
display: flex;
/* The main axis needs to be changed to Y axis and items are placed in columns*/
flex-direction: column;
/* align-items: flex-start; default placement*/
/* align-items: center; */
/* align-items: flex-end; */
}
div {
width: 100px;
height: 100px;
border: 1px solid tomato;
}
</style>align-items: flex-start; the cross axis is aligned from the start position align-items: center; Align the cross axis to the center
align-items: flex-end; the cross axis is aligned from the end position
Multiple axes: (The sum of the sizes of all items must be larger than the size of the container, so that the items wrap and display)
<style>
section {
width: 500px;
height: 500px;
border: 2px solid black;
margin: 50px auto;
display: flex;
flex-direction: column;
flex-wrap: wrap;
/* align-content: center; */
/* align-content: flex-end; */
/* align-content: space-between; */
/* align-content: space-around; */
}
div {
width: 100px;
height: 100px;
border: 1px solid tomato;
}
</style>align-content: flex-start; the cross axis is aligned from the starting position align-content: center; Align the cross axis to the center
align-content: flex-end; the cross axis is aligned from the end position
align-content: space-between; Align both ends of the cross axis
align-content: space-around; cross-axis distributed alignment
align-content: space-evenly; evenly distribute the cross axis
The properties and property values of the project: 1. Order controls the position of items order: 1; Value: positive or negative (default value is 0) The smaller the value, the closer it is to the front, and the larger the value, the closer it is to the back. (Applicable scenarios: 1. Search engine optimization, improve SEO and place important information in the front of the HTML code without affecting the layout 2. Adjust the project position)
<style>
section {
width: 500px;
height: 500px;
border: 2px solid black;
margin: 50px auto;
display: flex;
}
div {
width: 100px;
height: 100px;
border: 1px solid tomato;
}
div:nth-child(4) {
order: -1;
}
</style>
Set the alignment of one or more [items] on the cross axis:
<style>
section {
width: 800px;
height: 400px;
border: 2px solid black;
margin: 50px auto;
display: flex;
}
div {
width: 100px;
height: 100px;
border: 1px solid tomato;
}
div:nth-child(2) {
align-self: center;
}
div:nth-child(3) {
align-self:flex-end;
}
</style>align-self: flex-start; Set the item to be placed at the start of the cross axis (default position) align-self: center; Set the item to be centered on the cross axis align-self: flex-end; Set the item to be placed at the end of the cross axis
Set the magnification ratio of one or more elements Condition: The sum of the sizes of all items must be smaller than the size of the container (if there is no remaining space, setting this property has no effect.) An element has a flex-grow property
<style>
section {
width: 800px;
height: 400px;
border: 2px solid black;
margin: 50px auto;
display: flex;
}
div {
width: 100px;
height: 100px;
border: 1px solid tomato;
}
div:nth-child(2) {
flex-grow: 1;
}
</style>
Multiple items have flex-grow attributes
<style>
section {
width: 800px;
height: 200px;
border: 2px solid black;
margin: 50px auto;
display: flex;
box-sizing: border-box;
}
div {
width: 100px;
height: 100px;
border: 1px solid tomato;
box-sizing: border-box;
}
div:nth-child(2) {
flex-grow: 1;
}
div:nth-child(4) {
flex-grow: 2;
}
</style>Effect display
Divide the remaining space of the container into the corresponding number of flex-grow shares, and then distribute it to the items with flex-grow attributes according to the number of shares of each item. In short, flex is very convenient to use and can be applied to responsive layouts as well as holy grail layouts. It’s just that there are many properties, so you need to practice more and practice more. I believe you will be able to use flex proficiently quickly. I recommend a small game, which is very interesting and can enhance the use of flex: Flexbox Froggy http://blog.xiaoboswift.com/flexbox/#zh-cn Go and help the little frog go home~~ Summarize This is the end of this article about CSS3's new layout: detailed explanation of flex. For more relevant css flex layout content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future! |
<<: Advertising skills in the Baidu Union environment (graphic tutorial)
>>: HTML marquee tag usage examples
Recommend
MySql inserts data successfully but reports [Err] 1055 error solution
1. Question: I have been doing insert operations ...
HTML table cross-row and cross-column operations (rowspan, colspan)
Generally, the colspan attribute of the <td>...
Podman boots up the container automatically and compares it with Docker
Table of contents 1. Introduction to podman 2. Ad...
Detailed explanation of the front-end framework for low-threshold development of iOS, Android, and mini-program applications
Nowadays, cross-platform development technology i...
js to achieve simple calendar effect
This article shares the specific code of js to ac...
Mysql specifies the date range extraction method
In the process of database operation, it is inevi...
js detects keywords in the title and description and replaces or jumps to other pages when found
Keywords General The title cannot contain words l...
The difference between distinct and group by in MySQL
Simply put, distinct is used to remove duplicates...
Steps to create a Vite project
Table of contents Preface What does yarn create d...
Steps to install Pyenv under Deepin
Preface In the past, I always switched Python ver...
Do designers need to learn to code?
Often, after a web design is completed, the desig...
How to change the character set encoding to UTF8 in MySQL 5.5/5.6 under Linux
1. Log in to MySQL and use SHOW VARIABLES LIKE &#...
Implementation of Docker private library
Installing and deploying a private Docker Registr...
SQL merge operation of query results of tables with different columns
To query two different tables, you need to merge ...
The process of installing SVN on Ubuntu 16.04.5LTS
This article briefly introduces the process of se...