Example code for css flex layout with automatic line wrapping
|
To create a flex container, simply add a display: flex property to an element.
Similarly: adjust the style through the CSS of the console, as follows
Obtained: Obviously, it is confirmed that the flex item will be scaled down
At this point we need to add flex-flow: wrap to the parent element; the details are as follows
Final result
More references display: flex; /* flex-direction determines the direction of the main axis row (default) | row-reverse | column | column-reverse*/ /* flex-direction: row; */ /* flex-wrap determines whether to wrap lines and how to wrap lines when the arrangement does not fit, nowrap (default) | wrap | wrap-reverse */ /* flex-wrap:wrap; */ /* flex-flow is a shorthand form of lex-direction and flex-wrap, such as: row wrap | column wrap-reverse, etc. The default value is row nowrap, which means horizontal arrangement without line breaks*/ flex-flow:row wrap; /* !When the main axis is horizontal! justify-content determines the alignment of the item on the main axis. Possible values are flex-start (default), flex-end, center, space-between, space-around */ justify-content:center; /* !When the main axis is horizontal!Determines the alignment of the item on the cross axis. Possible values are flex-start|flex-end|center|baseline|stretch */ align-items:center; Example: CSS Flex elastic layout (multiple divs automatically wrap)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Flex Layout</title>
<style>
.con {
/* To create a flex container, just add a display: flex property to an element. */
/* By default, all direct child elements are considered flex items and are laid out in a row from left to right. */
/*If the total width of the flex items is greater than the container, the flex items will be scaled down proportionally until they fit the flex container width*/
display: flex;
/* flex-direction determines the direction of the main axis row (default) | row-reverse | column | column-reverse*/
/* flex-direction: row; */
/* flex-wrap determines whether to wrap lines and how to wrap lines when the arrangement does not fit, nowrap (default) | wrap | wrap-reverse */
/* flex-wrap:wrap; */
/* flex-flow is a shorthand form of lex-direction and flex-wrap, such as: row wrap | column wrap-reverse, etc. The default value is row nowrap, which means horizontal arrangement without line breaks*/
flex-flow: row wrap;
/* !When the main axis is horizontal! justify-content determines the alignment of the item on the main axis. Possible values are flex-start (default), flex-end, center, space-between, space-around */
justify-content: center;
/* !When the main axis is horizontal!Determines the alignment of the item on the cross axis. Possible values are flex-start|flex-end|center|baseline|stretch */
align-items: center;
}
.con > div {
width: 100px;
height: 100px;
background: #8DB6CD;
border: 1px solid black;
margin-left: 10px;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div class='con'>
<!-- The value of order is an integer, the default is 0. The smaller the integer, the higher the item is ranked. Here, only item1 and item4 are set with the order attribute. 1 and 4 are ranked at the end, and 4 is in front of 1. -->
<div style="order: 2">item 1</div>
<div style="height: 300px;">item 2</div>
<!-- flex-grow defines whether the item should be enlarged when there is extra space in the flex container and flex-shrink should be shrunk -->
<div style="flex-grow:2">item 3</div>
<div style="order: 1">item 4</div>
<div style="flex-basis:60px">item 5</div>
<div>item 6</div>
<div>item 7</div>
<div>item 8</div>
<div>item 9</div>
<div>item 10</div>
<div>item 11</div>
</div>
</body>
</html>This is the end of this article about the sample code of css flex layout overlong automatic wrap. For more relevant css flex overlong automatic wrap 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! |
<<: JavaScript implements fireworks effects with sound effects
>>: Centos8 builds nfs based on kdc encryption
Recommend
Detailed explanation of inline elements and block-level elements in commonly used HTML tags
Block element HTML tag classification details * a...
20 JS abbreviation skills to improve work efficiency
Table of contents When declaring multiple variabl...
Details of 7 kinds of component communication in Vue3
Table of contents 1. Vue3 component communication...
MySQL replication mechanism principle explanation
Background Replication is a complete copy of data...
How to quickly repair corrupted MySQL database files using the myisamchk and mysqlcheck tools
Because the server's database hard disk space...
How to implement communication between Docker containers
Scenario: A laradock development environment (php...
CSS 3.0 text hover jump special effects code
Here is a text hovering and jumping effect implem...
Mobile terminal adaptation makes px automatically converted to rem
Install postcss-pxtorem first: npm install postcs...
Datagrip2020 fails to download MySQL driver
If you cannot download it by clicking downloadlao...
Detailed explanation of the error when using Element-ui NavMenu submenu to generate recursively
When the submenu of the navigation bar is generat...
How to automatically start RabbitMq software when centos starts
1. Create a new rabbitmq in the /etc/init.d direc...
How to solve the problem that scroll-view of WeChat applet cannot slide left and right
I'm currently working on my own small program...
How to build lnmp environment in docker
Create a project directory mkdir php Create the f...
How to use ElementUI pagination component Pagination in Vue
The use of ElementUI paging component Pagination ...
Native js to realize the upload picture control
This article example shares the specific code of ...