Flex 是 Flexible Box 的缩写,意为"弹性布局",可以轻松的控制元素排列、对齐和顺序。
现在的终端类型非常多,使用弹性盒模型可以让元素在不同尺寸终端控制尺寸。
<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;
}
display:flex
块级弹性盒子
display:inline-flex
行级弹性盒子
放在容器盒子中的元素即为弹性元素(包括文本)。
flex-direction:
值 | 描述 |
---|---|
row | 从左到右水平排列元素(默认值) |
row-reverse | 从右向左排列元素 |
column | 从上到下垂直排列元素 |
column-reverse | 从下到上垂直排列元素 |
article {
display: flex;
border: solid 5px blueviolet;
flex-direction: row-reverse;
}
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;
}
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;
}
主轴:沿着原本排列方向的那条轴。
副轴(交叉轴):原本排列方向内容溢出换行后与主轴垂直的轴。
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;
}
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;
}
align-content:
只适用于多行显示的弹性容器,用于控制行(而不是元素)在交叉轴上的排列方式。
选项 | 说明 |
---|---|
stretch | 将空间平均分配给元素 |
flex-start | 元素紧靠主轴起点 |
flex-end | 元素紧靠主轴终点 |
center | 元素从弹性容器中心开始 |
space-between | 第一个元素靠起点,最后一个元素靠终点,余下元素平均分配空间 |
space-around | 每个元素两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍 |
space-evenly | 元素间距离平均分配 |
align-self:
用于控制单个元素在交叉轴上的排列方式,align-items
用于控制容器中所有元素的排列,而 align-self
用于控制一个弹性元素的交叉轴排列。
选项 | 说明 |
---|---|
stretch | 将空间平均分配给元素 |
flex-start | 元素紧靠主轴起点 |
flex-end | 元素紧靠主轴终点 |
center | 元素从弹性容器中心开始 |
article :first-child {
align-self: flex-start;
}
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;
}
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;
}
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;
}
flex:flex-grow flex-shrink flex-basis
order:
用于控制弹性元素的位置,默认为 order:0
。数值越小越在前面,可以负数或整数。
article :nth-child(1) {
order: 1;
}
article :nth-child(2) {
order: 2;
}
article :nth-child(3) {
order: -5;
}
绝对定位的弹性元素不参与弹性布局
article :nth-child(1) {
background-color: #000;
position: absolute;
left: 100px;
top: 200px;
}
相对定位的元素因为保留位置,所以参与布局。
article :nth-child(1) {
background-color: #000;
position: relative;
}
margin
自动撑满空间在弹性布局中对弹性盒子使用margin-right:auto
等形式可以自动撑满空间。
ul:nth-child(1) {
display: flex;
/* 让菜单ul自动填满右侧 */
margin-right: auto;
}