文章目录
- 1.弹性布局与传统布局相应对比
- 2.声明弹性盒子
- 3.弹性元素
- 4.弹性元素方向
- `flex-direction:`
- 5.弹性元素溢出换行
- `flex-wrap:`
- 6.统一设置方向和换行
- `flex-flow: flex-direction flex-wrap`
- 7.轴的概念
- 8.排列方式
- 9.弹性元素可用空间分配
- `flex-grow:`
- 10.弹性元素动态缩小
- `flex-shrink:`
- 11.主轴的基准尺寸的定义
- `flex-basis:`
- 12.弹性元素组合规则定义
- `flex:flex-grow flex-shrink flex-basis`
- 13.控制弹性元素的排序
- `order:`
- 14.定位元素在弹性布局中的表现
- 15.弹性布局中使用`margin`自动撑满空间
Flex 是 Flexible Box 的缩写,意为"弹性布局",可以轻松的控制元素排列、对齐和顺序。
现在的终端类型非常多,使用弹性盒模型可以让元素在不同尺寸终端控制尺寸。
1.弹性布局与传统布局相应对比
<body>
<main>
<nav>
Yooo
</nav>
<article>
Alison
</article>
</main>
</body>
传统布局:
* {
padding: 0;
margin: 0;
}
main {
position: relative;
height: 100vh;
}
main nav {
width: 80px;
position: absolute;
left: 0;
top: 0;
bottom: 0;
background: blueviolet;
}
main article {
background: #ccc;
padding-left: 90px;
background-clip: content-box;
height: 100vh;
}
弹性布局(代码量减小):
* {
padding: 0;
margin: 0;
}
main {
display: flex;
height: 100vh;
}
main nav {
background: blueviolet;
width: 80px;
}
main article {
background: #ddd;
flex: 1;
}
2.声明弹性盒子
display:flex
块级弹性盒子
display:inline-flex
行级弹性盒子
3.弹性元素
放在容器盒子中的元素即为弹性元素(包括文本)。
- 不能使用float与clear规则
- 弹性元素均为块元素
- 绝对定位的弹性元素不参与弹性布局
4.弹性元素方向
flex-direction:
值 | 描述 |
---|---|
row | 从左到右水平排列元素(默认值) |
row-reverse | 从右向左排列元素 |
column | 从上到下垂直排列元素 |
column-reverse | 从下到上垂直排列元素 |
article {
display: flex;
border: solid 5px blueviolet;
flex-direction: row-reverse;
}
5.弹性元素溢出换行
flex-wrap:
flex-wrap 属性规定flex容器是单行或者多行。
选项 | 说明 |
---|---|
nowrap | 压缩,元素不拆行或不拆列(默认值) |
wrap | 容器元素在必要的时候拆行或拆列。 |
wrap-reverse | 容器元素在必要的时候拆行或拆列,但是以相反的顺序 |
article {
display: flex;
width: 280px;
margin: 50px;
border: solid 5px blueviolet;
flex-direction: row;
flex-wrap: wrap;
}
6.统一设置方向和换行
flex-flow: flex-direction flex-wrap
article {
display: flex;
width: 280px;
margin: 50px;
border: solid 5px blueviolet;
/* flex-direction: row;
flex-wrap: wrap; */
flex-flow: row wrap;
}
7.轴的概念
主轴:沿着原本排列方向的那条轴。
副轴(交叉轴):原本排列方向内容溢出换行后与主轴垂直的轴。
(1)水平排列
(2)垂直排列
8.排列方式
(1)主轴元素的多种排列方式
justify-content:
选项 | 说明 |
---|---|
flex-start | 元素紧靠主轴起点 |
flex-end | 元素紧靠主轴终点 |
center | 元素从弹性容器中心开始 |
space-between | 第一个元素靠起点,最后一个元素靠终点,余下元素平均分配空间 |
space-around | 每个元素两侧的间隔相等。所以,元素之间的间隔比元素与容器的边距的间隔大一倍 |
space-evenly | 元素间距离平均分配 |
article {
display: flex;
width: 550px;
height: 250px;
margin: 50px;
border: solid 5px blueviolet;
flex-flow: row wrap;
justify-content: space-evenly;
}
(2)交叉轴元素的多种排列方式
align-items:
控制元素在交叉轴的行上的排列
选项 | 说明 |
---|---|
stretch | 元素被拉伸以适应容器(默认值) |
center | 元素位于容器的中心 |
flex-start | 元素位于容器的交叉轴开头 |
flex-end | 元素位于容器的交叉轴结尾 |
如果设置了 width | height | min-height | min-width | max-width | max-height
,将影响stretch
的结果,因为 stretch
优先级低于宽高设置。
article {
display: flex;
width: 550px;
height: 550px;
margin: 50px;
border: solid 5px blueviolet;
flex-direction: row;
justify-content: center;
align-items: center;
}
(3)多行元素在交叉轴的排列方式
align-content:
只适用于多行显示的弹性容器,用于控制行(而不是元素)在交叉轴上的排列方式。
选项 | 说明 |
---|---|
stretch | 将空间平均分配给元素 |
flex-start | 元素紧靠主轴起点 |
flex-end | 元素紧靠主轴终点 |
center | 元素从弹性容器中心开始 |
space-between | 第一个元素靠起点,最后一个元素靠终点,余下元素平均分配空间 |
space-around | 每个元素两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍 |
space-evenly | 元素间距离平均分配 |
(4)单个元素在交叉轴的排列方式
align-self:
用于控制单个元素在交叉轴上的排列方式,align-items
用于控制容器中所有元素的排列,而 align-self
用于控制一个弹性元素的交叉轴排列。
选项 | 说明 |
---|---|
stretch | 将空间平均分配给元素 |
flex-start | 元素紧靠主轴起点 |
flex-end | 元素紧靠主轴终点 |
center | 元素从弹性容器中心开始 |
article :first-child {
align-self: flex-start;
}
9.弹性元素可用空间分配
flex-grow:
用于将弹性盒子的可用空间,分配给弹性元素。可以使用整数或小数声明。(计算:剩余的空间按照比例平分)
article div:nth-child(1) {
flex-grow: 0;
}
article div:nth-child(2) {
flex-grow: 1;
}
article div:nth-child(3) {
flex-grow: 3;
}
10.弹性元素动态缩小
flex-shrink:
与 flex-grow
相反 flex-shrink
是在弹性盒子装不下元素时定义的缩小值。
article div:nth-child(1) {
flex-shrink: 0;
}
article div:nth-child(2) {
flex-shrink: 1;
}
article div:nth-child(3) {
flex-shrink: 3;
}
11.主轴的基准尺寸的定义
flex-basis:
flex-basis 属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。
优先级:max-width(height)
/min-width(height)
>flex-basis
>width
/height
article * {
flex-basis: 100px;
width: 100px;
height: 50px;
background: red;
background-clip: content-box;
padding: 10px;
box-sizing: border-box;
font-size: 35px;
color: white;
border: solid 1px blueviolet;
}
12.弹性元素组合规则定义
flex:flex-grow flex-shrink flex-basis
13.控制弹性元素的排序
order:
用于控制弹性元素的位置,默认为 order:0
。数值越小越在前面,可以负数或整数。
article :nth-child(1) {
order: 1;
}
article :nth-child(2) {
order: 2;
}
article :nth-child(3) {
order: -5;
}
14.定位元素在弹性布局中的表现
(1)绝对定位
绝对定位的弹性元素不参与弹性布局
article :nth-child(1) {
background-color: #000;
position: absolute;
left: 100px;
top: 200px;
}
(2)相对定位
相对定位的元素因为保留位置,所以参与布局。
article :nth-child(1) {
background-color: #000;
position: relative;
}
15.弹性布局中使用margin
自动撑满空间
在弹性布局中对弹性盒子使用margin-right:auto
等形式可以自动撑满空间。
ul:nth-child(1) {
display: flex;
/* 让菜单ul自动填满右侧 */
margin-right: auto;
}