当前位置:网站首页>Flexible layout (I)
Flexible layout (I)
2022-07-07 07:14:00 【Luqi zz】
Catalog
1 Declare block level elastic box display:flex
2 Declare inline elastic box display:inline-flex
Two 、flex-direction: Used to control the arrangement direction of box elements .
row-reverse Arrange elements from right to left
column-reverse Arrange elements vertically from bottom to top
Vertical element wrap column 、wrap
Vertical elements wrap in reverse column wrap-reverse
One 、 Declaration definition
Container box contains container elements , Use display:flex
or display:inline-flex
Declared as an elastic box .
1 Statement Block level Elastic box display:flex
<style>
* {
padding: 0;
margin: 0;
}
article {
height: 150px;
margin-left: 100px;
margin-top: 100px;
outline: solid 5px silver;
display: flex;
padding: 20px;
}
article div {
outline: solid 5px orange;
text-align: center;
font-size: 28px;
line-height: 5em;
width: 300px;
}
</style>
<!-- Declare block level elastic box -->
<body>
<article>
<div>1</div>
<div>2</div>
<div>3</div>
</article>
</body>
2 Declare inline elastic box display:inline-flex
<style>
...
article {
...
display: inline-flex;
...
}
...
</style>
Two 、flex-direction: Used to control the arrangement direction of box elements .
Use in display:flex
In the parent container of , Change the direction of the horizontal axis :
value | describe |
---|---|
row | Arrange elements horizontally from left to right ( The default value is ) |
row-reverse | Arrange elements from right to left |
column | Arrange elements vertically from top to bottom |
column-reverse | Arrange elements vertically from bottom to top |
row-reverse Arrange elements from right to left
<style>
* {
padding: 0;
margin: 0;
}
body {
margin: 100px;
font-size: 14px;
color: #555;
}
article {
width: 500px;
border: solid 5px silver;
display: flex;
box-sizing: border-box;
padding: 10px;
/* row-reverse Arrange elements from right to left */
flex-direction: row-reverse;
}
article * {
border: solid 5px orange;
padding: 10px;
margin: 10px;
}
</style>
...
<body>
<article>
<h4>1</h4>
<span>2</span>
<p>3</p>
</article>
</body>
column-reverse Arrange elements vertically from bottom to top
<style>
* {
padding: 0;
margin: 0;
}
body {
margin: 100px;
font-size: 14px;
color: #555;
}
article {
width: 500px;
border: solid 5px silver;
display: flex;
box-sizing: border-box;
padding: 10px;
/* column-reverse Arrange elements vertically from bottom to top */
flex-direction: column-reverse;
}
article * {
border: solid 5px orange;
padding: 10px;
margin: 10px;
}
</style>
...
<body>
<article>
<h4>1</h4>
<span>2</span>
<p>3</p>
</article>
</body>
3、 ... and 、flex-wrap
Regulations flex The container is one or more lines , At the same time, the direction of the horizontal axis determines the direction of the new row stack .
Options | explain |
---|---|
nowrap | Elements do not split rows or columns ( The default value is ) |
wrap | Container elements split rows or columns when necessary . |
wrap-reverse | Container elements split rows or columns when necessary , But in reverse order |
Line element wrap row 、wrap
<style>
* {
padding: 0;
margin: 0;
outline: solid 1px silver;
padding: 10px;
margin: 10px;
}
head {
display: block;
}
body {
font-size: 14px;
color: #555;
}
article {
width: 500px;
height: 250px;
border: solid 5px silver;
box-sizing: border-box;
padding: 10px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
article div {
border: solid 5px orange;
padding: 30px 80px;
margin: 10px;
text-align: center;
font-size: 28px;
}
</style>
...
<article>
<div>1</div>
<div>2</div>
<div>3</div>
</article>
Horizontal arrangement reverse line feed row 、wrap-reverse
flex-direction: row;
flex-wrap: wrap-reverse;
Vertical element wrap column 、wrap
flex-direction: column;
flex-wrap: wrap;
Vertical elements wrap in reverse column wrap-reverse
flex-direction: column;
flex-wrap: wrap-reverse;
Four 、flex-flow
yes flex-direction
And flex-wrap
The combination abbreviation mode of .
The following is arranged from right to left , Line breaking up branches .
flex-flow: row-reverse wrap-reverse;
边栏推荐
- How to do sports training in venues?
- Graduation design game mall
- Readonly read only
- Please answer the questions about database data transfer
- Tujia, muniao, meituan... Home stay summer war will start
- oracle如何备份索引
- 计算机服务中缺失MySQL服务
- $parent(获取父组件) 和 $root(获取根组件)
- 异步组件和Suspense(真实开发中)
- Procedure in PostgreSQL supports transaction syntax (instance & Analysis)
猜你喜欢
Jesd204b clock network
Mysql---- import and export & View & Index & execution plan
弹性布局(二)
Config分布式配置中心
Asynchronous components and suspend (in real development)
[noi simulation] regional division (conclusion, structure)
.net 5 FluentFTP连接FTP失败问题:This operation is only allowed using a successfully authenticated context
This article introduces you to the characteristics, purposes and basic function examples of static routing
The currently released SKU (sales specification) information contains words that are suspected to have nothing to do with baby
SolidWorks GB Library (steel profile library, including aluminum profile, aluminum tube and other structures) installation and use tutorial (generating aluminum profile as an example)
随机推荐
Graduation design game mall
Use of completable future
2018 Jiangsu Vocational College skills competition vocational group "information security management and evaluation" competition assignment
Bindingexception exception (error reporting) processing
. Net core accesses uncommon static file types (MIME types)
LVS+Keepalived(DR模式)学习笔记
Tumor immunotherapy research prosci Lag3 antibody solution
Circulating tumor cells - here comes abnova's solution
Communication between non parent and child components
jdbc数据库连接池使用问题
Détailler le bleu dans les tâches de traduction automatique
Learning records on July 4, 2022
请教一个问题,flink oracle cdc,读取一个没有更新操作的表,隔十几秒就重复读取全量数据
How to model and simulate the target robot [mathematical / control significance]
软件验收测试
Exception of DB2 getting table information: caused by: com ibm. db2.jcc. am. SqlException: [jcc][t4][1065][12306][4.25.13]
大咖云集|NextArch基金会云开发Meetup来啦
Unity3d learning notes
DHCP路由器工作原理
Matlab tips (30) nonlinear fitting lsqcurefit