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
Building a KVM virtualization platform on CentOS7 (three ways)
KVM stands for Kernel-based Virtual Machine, whic...
Discussion on style customization and browser compatibility issues when using input element [type="file"]
I encountered such a problem when doing the writte...
Example of how to modify styles via CSS variables
question How to modify CSS pseudo-class style wit...
Solution to the long delay of MySQL database master-slave replication
Preface The delay of MySQL master-slave replicati...
Briefly describe how to install Tomcat image and deploy web project in Docker
1. Install Tomcat 1. Find the tomcat image on Doc...
Basic application methods of javascript embedded and external links
Table of contents Basic application of javascript...
React internationalization react-intl usage
How to achieve internationalization in React? The...
About VSCode formatting JS automatically adding or removing semicolons
introduction It is okay to add or not add a semic...
JavaScript implements random generation of verification code and verification
This article shares the specific code of JavaScri...
Color matching techniques and effect display for beauty and styling websites
Color is one of the most important elements for a...
MYSQL METADATA LOCK (MDL LOCK) theory and lock type test
Table of contents MYSQL METADATA LOCK (MDL LOCK) ...
Methods and steps to use http-proxy-middleware to implement proxy cross-domain in Node
Table of contents 1. Install the proxy module 2. ...
Service management of source package installation under Linux
Table of contents 1. Startup management of source...
You may need a large-screen digital scrolling effect like this
The large-screen digital scrolling effect comes f...
Detailed steps to install Docker mongoDB 4.2.1 and collect springboot logs
1: Install mongodb in docker Step 1: Install mong...