当前位置:网站首页>Flex layout and usage
Flex layout and usage
2022-07-07 04:44:00 【From one to one】
Key summary :
- Add elastic layout :display:flex;
- Center the spindle :justify-content: center;
- The spindle spacing is between children :justify-content: space-between;
- The distance between all parts of the spindle is equal :justify-content: space-evenly;
- The spindle spacing is surrounded on both sides :justify-content: space-around;
- The side axis is centered :align-items: center;
- A child of the side axis is centered :align-self:center;
- When the child has no width , The child width is the content width
- When the child has no height , The height of the child is the height of the container
Usage mode :
Components :
- Elastic container ( Parent )
- Elastic box ( Sub level )
- Spindle
- Side axle / Cross shaft
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
<style>
* {
margin: 0;
padding: 0;
}
.box {
/* Visual effect : The children are arranged in a row / Horizontal arrangement */
/* Horizontal arrangement : The default spindle is horizontal , Elastic boxes are arranged along the main axis */
display: flex;
height: 200px;
margin-top: 30px;
border: 1px solid #000;
}
.box div {
/* When the child has no width set , The width of the box is the width of the content */
/*width: 100px;*/
height: 100px;
background-color: pink;
}
</style>
Spindle alignment :
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
<style>
* {
margin: 0;
padding: 0;
}
.box {
display: flex;
/* effect 1: In the middle */
/*justify-content: center;*/
/* effect 2: The spacing is in the elastic box ( Sub level ) Between */
/*justify-content: space-between;*/
/* effect 3: All places are equally spaced */
/*justify-content: space-evenly;*/
/* effect 4: The spacing is surrounded on both sides of the child */
/* Visual effect : The distance between children is the distance between the two ends of the parent 2 times */
justify-content: space-around;
width: 400px;
height: 200px;
margin:30px auto;
border: 1px solid #000;
}
.box div {
width: 100px;
height: 100px;
background-color: pink;
}
</style>
Side axis alignment :
- Control all children : to Father Element to add align-items: Property value ;
- Control a child : to Son Element to add align-self: Property value ;
stretch Is the default value of the side axis , In this mode Children have no height when , The height will be stretched to the same height as the parent .
<body>
<div class="box">
<div>1111</div>
<div>2</div>
<div>3</div>
</div>
</body>
<style>
* {
margin: 0;
padding: 0;
}
.box {
display: flex;
/* effect 1: All children are centered */
/* align-items: center; */
/* effect 3: The tensile , The default value is ( Existing status , When testing, remove the height of children ) */
align-items: stretch;
width: 400px;
height: 200px;
margin: 30px auto;
border: 1px solid #000;
}
.box div {
width: 100px;
/* height: 100px; */
background-color: pink;
}
/* effect 2: Set the side axis alignment of an elastic box separately */
.box div:nth-child(2) {
/* align-self:center ; */
}
</style>
Expansion ratio :
to Son Element to add flex: An integer value ; The integer value is occupy parent Remaining dimensions Number of copies .
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
<style>
* {
margin: 0;
padding: 0;
}
.box {
display: flex;
width: 400px;
height: 300px;
margin: 30px auto;
border: 1px solid #000;
}
.box div {
height: 200px;
margin: 0 10px;
background-color: pink;
}
.box div:nth-child(1) {
width: 50px;
}
.box div:nth-child(2) {
/* The number of copies of the remaining size of the parent */
flex: 3;
}
.box div:nth-child(3) {
flex: 1;
}
</style>
The above code , Sub level 1 For a fixed width , Sub level 2、3 Is the occupation width . Parent width minus child 1 Size and children 2 And children 3 After the size of the outer margin , The remaining dimensions are divided into 3+1=4 Share , Including children 2 Width share 3 Share , Sub level 3 Width share 1 Share . The remaining size of the parent can be divided into integer parts at will ,1+2、3+4、2+7 You can wait .
边栏推荐
- Digital chemical plant management system based on Virtual Simulation Technology
- A series of shortcut keys for jetbrain pychar
- On the 110th anniversary of Turing's birth, has the prediction of intelligent machine come true?
- You can't sell the used lithography machine to China! The United States unreasonably pressured the Dutch ASML, and domestic chips were suppressed again
- Practice Guide for interface automation testing (middle): what are the interface testing scenarios
- How to conduct website testing of software testing? Test strategy let's go!
- Win11玩绝地求生(PUBG)崩溃怎么办?Win11玩绝地求生崩溃解决方法
- What work items do programmers hate most in their daily work?
- leetcode 53. Maximum subarray maximum subarray sum (medium)
- [digital analog] source code of MATLAB allcycles() function (not available before 2021a)
猜你喜欢
Win11截图键无法使用怎么办?Win11截图键无法使用的解决方法
树与图的深度优先遍历模版原理
Kivy tutorial of setting the size and background of the form (tutorial includes source code)
NFT meta universe chain diversified ecosystem development case
计数排序基础思路
Practice Guide for interface automation testing (middle): what are the interface testing scenarios
Introduction to the PureMVC series
C#使用西门子S7 协议读写PLC DB块
mpf2_ Linear programming_ CAPM_ sharpe_ Arbitrage Pricin_ Inversion Gauss Jordan_ Statsmodel_ Pulp_ pLU_ Cholesky_ QR_ Jacobi
See Gardenia minor
随机推荐
Up to 5million per person per year! Choose people instead of projects, focus on basic scientific research, and scientists dominate the "new cornerstone" funded by Tencent to start the application
Station B boss used my world to create convolutional neural network, Lecun forwarding! Burst the liver for 6 months, playing more than one million
AI表现越差,获得奖金越高?纽约大学博士拿出百万重金,悬赏让大模型表现差劲的任务
Win11控制面板快捷键 Win11打开控制面板的多种方法
leetcode 53. Maximum Subarray 最大子数组和(中等)
ESG Global Leaders Summit | Intel Wang Rui: coping with global climate challenges with the power of science and technology
Wechat can play the trumpet. Pinduoduo was found guilty of infringement. The shipment of byte VR equipment ranks second in the world. Today, more big news is here
[team learning] [34 issues] scratch (Level 2)
Introduction to the PureMVC series
Camera calibration (I): robot hand eye calibration
A series of shortcut keys for jetbrain pychar
What about the collapse of win11 playing pubg? Solution to win11 Jedi survival crash
C#使用西门子S7 协议读写PLC DB块
[on automation experience] the growth path of automated testing
两个div在同一行,两个div不换行「建议收藏」
Code source de la fonction [analogique numérique] MATLAB allcycles () (non disponible avant 2021a)
The worse the AI performance, the higher the bonus? Doctor of New York University offered a reward for the task of making the big model perform poorly
You can't sell the used lithography machine to China! The United States unreasonably pressured the Dutch ASML, and domestic chips were suppressed again
Win11远程桌面连接怎么打开?Win11远程桌面连接的五种方法
EasyCVR集群重启导致其他服务器设备通道状态离线情况的优化