当前位置:网站首页>Flexible layout (II)
Flexible layout (II)
2022-07-07 07:14:00 【Luqi zz】
Catalog
Use space-evenly Distribute container elements equally
5、 ... and 、 Acting on sub tags 6 Big attributes
One 、 Axis description
Horizontal arrangement
Here's how to use flex-flow: row wrap
Description of main axis and cross axis .
Here's how to use flex-flow: row-reverse wrap-reverse
Description of main axis and cross axis .
Arrange vertically
Here's how to use flex-flow: column wrap
Description of main axis and cross axis .
Two 、justify-content
Used to control the element in Spindle The arrangement on the , Again, it is the arrangement of spindles .
Options | explain |
---|---|
flex-start | The element is close to the starting point of the spindle |
flex-end | The element is close to the end of the spindle |
center | The element starts at the center of the elastic container |
space-between | The first element depends on the starting point , The last element depends on the end , The remaining elements allocate space equally |
space-around | The spacing on both sides of each element is equal . therefore , The spacing between elements is twice as large as the spacing between elements and containers |
space-evenly | Average distribution of distance between elements |
Arrange elements horizontally , And use justify-content: flex-end
Align to the end of the spindle
<style>
* {
padding: 0;
margin: 0;
padding: 10px;
margin: 10px;
}
body {
font-size: 14px;
color: #555;
}
article {
border: solid 5px silver;
box-sizing: border-box;
display: flex;
flex-flow: row wrap;
justify-content: flex-end;
}
article div {
width: 80px;
border: solid 5px orange;
text-align: center;
font-size: 28px;
}
</style>
...
<article>
<div>1</div>
<div>2</div>
<div>3</div>
</article>
Use space-evenly
Distribute container elements equally
flex-flow: row wrap;
justify-content: space-evenly;
Align to the end of the spindle when arranging vertically
flex-flow: column wrap;
justify-content: flex-end;
3、 ... and 、 Cross axis row
1.align-items
Used to control the arrangement of container elements on the cross axis .
Options | explain |
---|---|
stretch | The elements are stretched to fit the container ( The default value is ) |
center | The element is in the center of the container |
flex-start | The element is at the beginning of the cross axis of the container |
flex-end | The element is at the end of the cross axis of the container |
(1) To arrange horizontally
Stretch to fit the cross axis
If set width | height | min-height | min-width | max-width | max-height
, Will affect stretch
Result , because stretch
The priority is lower than the width and height you set .
<style>
* {
padding: 0;
margin: 0;
padding: 10px;
margin: 5px;
}
head {
display: block;
}
body {
font-size: 14px;
color: #555;
}
article {
height: 200px;
border: solid 5px silver;
box-sizing: border-box;
display: flex;
flex-direction: row;
align-items: stretch;
}
article div {
width: 80px;
border: solid 5px orange;
text-align: center;
font-size: 28px;
}
</style>
...
<article>
<div>1</div>
<div>2</div>
<div>3</div>
</article>
Align to the top of the cross axis
flex-direction: row;
align-items: flex-start;
Align to the bottom of the cross axis
flex-direction: row;
align-items: flex-end;
Align to the center of the cross axis
flex-direction: row;
align-items: center;
(2) Arrange vertically
In longitudinal arrangement, the cross axis arrangement
<style>
* {
padding: 0;
margin: 0;
padding: 10px;
margin: 5px;
}
article {
height: 400px;
border: solid 5px silver;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
}
article div {
height: 50px;
min-width: 100px;
border: solid 5px orange;
text-align: center;
font-size: 28px;
}
</style>
...
<article>
<div>1</div>
<div>2</div>
<div>3</div>
</article>
2.align-content
Only applicable to elastic containers with multi line display , Used to control the line ( Not the elements ) The arrangement on the cross axis .
Options | explain |
---|---|
stretch | Allocate space equally to elements |
flex-start | The element is close to the starting point of the spindle |
flex-end | The element is close to the end of the spindle |
center | The element starts at the center of the elastic container |
space-between | The first element depends on the starting point , The last element depends on the end , The remaining elements allocate space equally |
space-around | The spacing on both sides of each element is equal . therefore , The spacing between items is twice as large as the spacing between items and the border |
space-evenly | Average distribution of distance between elements |
Horizontal arrangement is centered in the cross axis
<style>
* {
padding: 0;
margin: 0;
padding: 10px;
margin: 5px;
}
article {
height: 300px;
border: solid 5px silver;
box-sizing: border-box;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
align-content: center;
}
article div {
width: 90px;
border: solid 5px orange;
text-align: center;
font-size: 28px;
}
</style>
.......
<article>
<div>1</div>
<div>2</div>
<div>3</div>
</article>
The arrangement of cross axes when arranged vertically
flex-direction: column;
flex-wrap: wrap;
align-items: flex-start;
align-content: center;
Four 、 Elastic element
The element placed in the container box is the container element .
- Out of commission float And clear The rules
- Elastic elements are block elements
- Elastic elements with absolute positioning do not participate in elastic layout
1. align-self
Used to control the arrangement of individual elements on the cross axis ,align-items
Used to control the arrangement of all elements in the container , and align-self
Used to control the cross axis arrangement of an elastic element .
Options | explain |
---|---|
stretch | Allocate space equally to elements |
flex-start | The element is close to the starting point of the spindle |
flex-end | The element is close to the end of the spindle |
center | The element starts at the center of the elastic container |
<style>
* {
padding: 0;
margin: 0;
padding: 10px;
margin: 5px;
}
article {
height: 400px;
border: solid 5px silver;
box-sizing: border-box;
display: flex;
flex-direction: row;
align-items: center;
}
article div {
height: 50px;
min-width: 50px;
border: solid 5px orange;
text-align: center;
font-size: 28px;
}
article div:nth-of-type(1) {
/* The element is close to the starting point of the spindle */
align-self: flex-start;
}
article div:nth-of-type(3) {
/* The element is close to the end of the spindle */
align-self: flex-end;
}
</style>
...
<article>
<div>1</div>
<div>2</div>
<div>3</div>
</article>
5、 ... and 、 Acting on sub tags 6 Big attributes
1 order Property defines the order in which items are arranged . The smaller the numerical , The further up the line , The default is 0.
2 flex-grow Attribute defines the magnification of the item , The default is 0, That is, if there is any remaining space , And don't zoom in .
3 flex-shrink Attribute defines the reduction ratio of the project , The default is 1, That is, if there is not enough space , The project will shrink Set to 0, Insufficient parent space , The project will not shrink , Other children .
4 flex-basis Define the spindle space occupied by the project . If the spindle is horizontal , Set this property , Set the width of the project . primary width It will fail .
5 flex The attribute is flex-grow, flex-shrink and flex-basis Abbreviation , The default value is 0 1 auto. The last two properties are optional .
6 align-self: Define the individual project itself in On the cross axis The arrangement of , It can cover the container align-items attribute .
边栏推荐
- $parent(获取父组件) 和 $root(获取根组件)
- Databinding exception of kotlin
- Learning records on July 4, 2022
- PostgreSQL source code (60) transaction system summary
- 点亮显示屏的几个重要步骤
- After the promotion, sales volume and flow are both. Is it really easy to relax?
- Le Service MySQL manque dans le service informatique
- 组件的通信
- Lm11 reconstruction of K-line and construction of timing trading strategy
- LC 面试题 02.07. 链表相交 & LC142. 环形链表II
猜你喜欢
Can 7-day zero foundation prove HCIA? Huawei certification system learning path sharing
Kuboard无法发送邮件和钉钉告警问题解决
How to model and simulate the target robot [mathematical / control significance]
transform-origin属性详解
How to share the same storage among multiple kubernetes clusters
Master-slave replication principle of MySQL
Prime partner of Huawei machine test questions
SolidWorks GB Library (steel profile library, including aluminum profile, aluminum tube and other structures) installation and use tutorial (generating aluminum profile as an example)
Non empty verification of collection in SQL
Anr principle and Practice
随机推荐
工具类:对象转map 驼峰转下划线 下划线转驼峰
Circulating tumor cells - here comes abnova's solution
SQLMAP使用教程(四)实战技巧三之绕过防火墙
How can gyms improve their competitiveness?
. Net core accesses uncommon static file types (MIME types)
This article introduces you to the characteristics, purposes and basic function examples of static routing
sql中对集合进行非空校验
Mysql---- import and export & View & Index & execution plan
Introduction to abnova's in vitro mRNA transcription workflow and capping method
Release notes of JMeter version 5.5
How can brand e-commerce grow against the trend? See the future here!
The currently released SKU (sales specification) information contains words that are suspected to have nothing to do with baby
Non empty verification of collection in SQL
RuntimeError: CUDA error: CUBLAS_ STATUS_ ALLOC_ Failed when calling `cublascreate (handle) `problem solving
FullGC问题分析及解决办法总结
Brand · consultation standardization
Lvs+kept (DR mode) learning notes
Advantages of using net core / why
Precise space-time travel flow regulation system - ultra-high precision positioning system based on UWB
The startup of MySQL installed in RPM mode of Linux system failed