当前位置:网站首页>弹性布局(一)
弹性布局(一)
2022-07-07 03:22:00 【鹿蹊zz】
目录
2 声明内联级弹性盒子 display:inline-flex
二、flex-direction:用于控制盒子元素排列的方向。
一、声明定义
容器盒子里面包含着容器元素,使用display:flex
或 display:inline-flex
声明为弹性盒子。
1 声明块级弹性盒子 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>
<!-- 声明块级弹性盒子 -->
<body>
<article>
<div>1</div>
<div>2</div>
<div>3</div>
</article>
</body>
2 声明内联级弹性盒子 display:inline-flex
<style>
...
article {
...
display: inline-flex;
...
}
...
</style>
二、flex-direction:用于控制盒子元素排列的方向。
使用在display:flex
的父容器里,改变横轴的方向:
值 | 描述 |
---|---|
row | 从左到右水平排列元素(默认值) |
row-reverse | 从右向左排列元素 |
column | 从上到下垂直排列元素 |
column-reverse | 从下到上垂直排列元素 |
row-reverse 从右向左排列元素
<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 从右向左排列元素 */
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 从下到上垂直排列元素
<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 从下到上垂直排列元素 */
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>
三、flex-wrap
规定flex容器是单行或者多行,同时横轴的方向决定了新行堆叠的方向。
选项 | 说明 |
---|---|
nowrap | 元素不拆行或不拆列(默认值) |
wrap | 容器元素在必要的时候拆行或拆列。 |
wrap-reverse | 容器元素在必要的时候拆行或拆列,但是以相反的顺序 |
行元素换行 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>
水平排列反向换行 row 、wrap-reverse
flex-direction: row;
flex-wrap: wrap-reverse;
垂直元素换行 column 、wrap
flex-direction: column;
flex-wrap: wrap;
垂直元素反向换行 column wrap-reverse
flex-direction: column;
flex-wrap: wrap-reverse;
四、flex-flow
是 flex-direction
与 flex-wrap
的组合简写模式。
下面是从右向左排列,换行向上拆分行。
flex-flow: row-reverse wrap-reverse;
边栏推荐
- MySQL binlog related commands
- SolidWorks GB Library (steel profile library, including aluminum profile, aluminum tube and other structures) installation and use tutorial (generating aluminum profile as an example)
- Anr principle and Practice
- 云备份项目
- Graduation design game mall
- 异步组件和Suspense(真实开发中)
- 根据IP获取地市
- FPGA course: application scenario of jesd204b (dry goods sharing)
- LVS+Keepalived(DR模式)学习笔记
- How can gyms improve their competitiveness?
猜你喜欢
How can brand e-commerce grow against the trend? See the future here!
Answer to the second stage of the assignment of "information security management and evaluation" of the higher vocational group of the 2018 Jiangsu Vocational College skills competition
How to do sports training in venues?
场馆怎么做体育培训?
SolidWorks的GB库(钢型材库,包括铝型材、铝管等结构)安装及使用教程(生成铝型材为例)
RuntimeError: CUDA error: CUBLAS_ STATUS_ ALLOC_ Failed when calling `cublascreate (handle) `problem solving
$refs:组件中获取元素对象或者子组件实例:
Several index utilization of joint index ABC
Basic introduction of JWT
From zero to one, I will teach you to build the "clip search by text" search service (2): 5 minutes to realize the prototype
随机推荐
Paranoid unqualified company
linux系统rpm方式安装的mysql启动失败
AVL树的实现
JWT的基础介绍
How DHCP router works
Stack Title: nesting depth of valid parentheses
How can brand e-commerce grow against the trend? See the future here!
Release notes of JMeter version 5.5
【mysqld】Can't create/write to file
freeswitch拨打分机号源代码跟踪
from .onnxruntime_pybind11_state import * # noqa ddddocr运行报错
Under what circumstances should we consider sub database and sub table
Answer to the second stage of the assignment of "information security management and evaluation" of the higher vocational group of the 2018 Jiangsu Vocational College skills competition
Can 7-day zero foundation prove HCIA? Huawei certification system learning path sharing
MOS tube parameters μ A method of Cox
Maze games based on JS
The latest trends of data asset management and data security at home and abroad
Sqlserver multithreaded query problem
FPGA course: application scenario of jesd204b (dry goods sharing)
Big coffee gathering | nextarch foundation cloud development meetup is coming