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 simple snow effect example using JS
Table of contents Preface Main implementation cod...
How to automatically delete records before a specified time in Mysql
About Event: MySQL 5.1 began to introduce the con...
Superficial Web Design
<br />I have always believed that Yahoo'...
Docker adds a bridge and sets the IP address range
I don't know if it's because the binary d...
Vue implements upload component
Table of contents 1. Introduction 2. Ideas Two wa...
MySQL Query Cache and Buffer Pool
1. Caches - Query Cache The following figure is p...
Mobile browser Viewport parameters (web front-end design)
Mobile browsers place web pages in a virtual "...
Why is it not recommended to use index as key in react?
1. Compare the old virtual DOM with the new virtu...
MySQL 5.7.18 free installation version configuration tutorial
MySQL 5.7.18 free installation version installati...
MySQL 5.7.13 winx64 installation and configuration method graphic tutorial (win10)
This article shares with you the graphic tutorial...
HTML adaptive table method
<body style="scroll:no"> <tabl...
Detailed explanation of using scp command to copy files remotely in Linux
Preface scp is the abbreviation of secure copy. s...
Detailed explanation of three solutions to the website footer sinking effect
Background Many website designs generally consist...
A simple method to regularly delete expired data records in MySQL
1. After connecting and logging in to MySQL, firs...
Use Firebug tool to debug the page on iPad
How to debug a page on iPad? When using iOS 5, you...