Display flex arrangement in CSS (layout tool)
|
Regarding display: flex layout, some people have a deep understanding of it, and I also learned from others' work. display: I have no idea what flex layout is or its basic concepts, I just know how to use it. Whenever I see something like a concept, I just glance over it. First property and usage: flex-direction There are 4 methods I know of: row (horizontal arrangement), row-revese (horizontal reverse arrangement), column (vertical arrangement), column-reserve (vertical reverse arrangement)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="width:300px;border:1px solid red;display: flex;flex-direction: row;">
<div style="width: 100px;height: 100px;background-color: black;"></div>
<div style="width: 100px;height: 100px;background-color: green;"></div>
<div style="width: 100px;height: 100px;background-color: yellow;"></div>
<div style="width: 100px;height: 100px;background-color: blue;"></div>
</div>
</body>
</html>
The above code and effect diagram are the effects when the attribute is row Note: Although the width is set, the parent container is only 300px, and the child div cannot reach 100px, but adapts to the parent container Just replace the flex-direction: row code with flex-direction: row-revese or flex-direction: column or flex-direction: column-reserve to get different effects. Here is the effect diagram:
row-revese -------
column -------
column-reverse ------- The second property and usage: flex-wrap These are the line break properties: nowrap (no line break), wrap (line break), wrap-reverse (direction line break)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="width:300px;border:1px solid red;display: flex;flex-wrap: wrap;">
<div style="width: 100px;height: 100px;background-color: black;"></div>
<div style="width: 100px;height: 100px;background-color: green;"></div>
<div style="width: 100px;height: 100px;background-color: yellow;"></div>
<div style="width: 100px;height: 100px;background-color: blue;"></div>
</div>
</body>
</html>
This is the code and effect diagram of the line break ------- Replace the property flex-wrap: wrap with nowrap (no line break) and wrap-reverse (direction line break) to get the following effect:
nowrap -----
wrap-reverse --------- The third attribute and usage: justify-content Contains properties: flex-start (default): left-aligned;
Align Left flex-end: right alignment
Right Align center: centered;
Center alignment space-between: Align both ends, with equal spacing between items;
Alignment space-around: The spacing on both sides of each item is equal, that is, the spacing between items is twice as large as the spacing between items and borders.
The distance between the two sides is equal. I, Xiaobai, also stole a lot of things from there. Summarize The above is the editor’s introduction to display flex organization (layout tool) in CSS. I hope it will be helpful to you! |
<<: Steps for packaging and configuring SVG components in Vue projects
>>: Incomplete solution for using input type=text value=str
Recommend
HTML framework_Powernode Java Academy
1. Framework A browser document window can only d...
Using Vue to implement timer function
This article example shares the specific code of ...
Detailed tutorial on docker-compose deployment and configuration of Jenkins
Docker-compose deployment configuration jenkins 1...
Solution to prevent caching in pages
Solution: Add the following code in <head>: ...
HTML table markup tutorial (48): CSS modified table
<br />Now let's take a look at how to cl...
Simple tutorial on using Navicat For MySQL
recommend: Navicat for MySQL 15 Registration and ...
Analysis of the problems and solutions encountered in importing large amounts of data into MySQL
In the project, we often encounter the problem of...
The Linux operating system uses Python to implement the visualization function of the task manager
1. Python installation 1. Create a folder. mkdir ...
JavaScript lazy loading detailed explanation
Table of contents Lazy Loading CSS styles: HTML p...
Summary of naming conventions for HTML and CSS
CSS naming rules header: header Content: content/c...
How to implement logic reuse with Vue3 composition API
Composition API implements logic reuse steps: Ext...
HTML simple web form creation example introduction
<input> is used to collect user information ...
Example code for implementing triangles and arrows through CSS borders
1. CSS Box Model The box includes: margin, border...
17 JavaScript One-Liners
Table of contents 1. DOM & BOM related 1. Che...
How to install MySQL and Redis in Docker
This article is based on the CentOS 7.3 system en...