Flex 是 Flexible Box 的缩写，意为"弹性布局"。使用 display:flex 或display:inline-flex声明为弹性盒子。设置flex布局后，子元素的float、clear、vertical-align属性将失效。
html
<div class="box">
<div></div>
<div></div>
<div></div>
</div>
css
.box{
display: flex;
}
弹性盒子的属性
| 属性 | 说明 |
|---|---|
| flex-direction | 控制盒子元素排列的方向 |
| flex-wrap | 规定flex容器是单行或者多行，换行方式由flex-direction决定 |
| flex-flow | flex-flow 是 flex-direction 与 flex-wrap 的组合简写模式 |
| justify-content | 控制元素在主轴上的排列方式 |
| align-items | 用于控制容器元素在交叉轴上的排列方式 |
| align-content | 只适用于多行显示的弹性容器，它的作用是当flex容器在交叉轴上有多余的空间时，对元素的对齐处理 |
flex-direction属性
了解flex-direction概念之前，先要知道主轴和交叉轴的概念，它们的关系如下：
flex-direction指定了内部元素是如何在 flex 容器中布局的，定义了主轴的方向(正方向或反方向)
| 值 | 描述 |
|---|---|
| row | 从左到右水平排列元素（默认值） |
| row-reverse | 从右向左排列元素 |
| column | 从上到下垂直排列元素 |
| column-reverse | 从下到上垂直排列元素 |
.box {
flex-direction: row | row-reverse | column | column-reverse;
}
flex-wrap属性
flex-wrap 属性规定子元素超过盒子大小时排列方式，如果允许换行，横轴的方向决定了新行堆叠的方向
| 选项 | 说明 |
|---|---|
| nowrap | 元素不拆行或不拆列（默认值） |
| wrap | 容器元素在必要的时候拆行或拆列 |
| wrap-reverse | 容器元素在必要的时候拆行或拆列，但是以相反的顺序 |
.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}
flex规定子元素所占比例，可以一行显示多个元素，配合媒体查询可以实现动态调整一行元素个数
.box div{
flex:20%;
}
如果仅设置flex:20%，但没有设置flex-wrap，所有子项目会在一行显示
flex-flow属性
flex-flow 是 flex-direction 与 flex-wrap 的组合简写模式
下面是从右向左排列，换行向上拆分行
flex-flow: row-reverse wrap-reverse;
下面是从上向下排列，换行向右拆分行
flex-flow: column wrap
flex-direction:column主轴垂直，交叉轴水平
justify-content属性
定义了子元素在主轴上的对齐方式
.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
| 选项 | 说明 |
|---|---|
| flex-start | 元素紧靠主轴起点 |
| flex-end | 元素紧靠主轴终点 |
| center | 元素从弹性容器中心开始 |
| space-between | 第一个元素靠起点，最后一个元素靠终点，余下元素平均分配空间 |
| space-around | 每个元素两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍 |
| space-evenly | 元素间距离平均分配 |
align-items属性
定义子元素在交叉轴上对齐方式
.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}
注意：
- 如果设置了 width | height | min-height | min-width | max-width | max-height ，将影响stretch的结果，因为stretch优先级低于于宽高设置
align-content属性
只适用于多行显示的弹性容器，它的作用是当flex容器在交叉轴上有多余的空间时，对元素的对齐处理
| 选项 | 说明 |
|---|---|
| stretch | 将空间平均分配给元素 |
| flex-start | 元素紧靠主轴起点 |
| flex-end | 元素紧靠主轴终点 |
| center | 元素从弹性容器中心开始 |
| space-between | 第一个元素靠起点，最后一个元素靠终点，余下元素平均分配空间 |
| space-around | 每个元素两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍 |
| space-evenly | 元素间距离平均分配 |
水平排列在交叉轴中居中排列align-content: center
<article>
<div>1</div>
<div>2</div>
<div>3</div>
</article>
<style>
* {
padding: 0;
margin: 0;
padding: 10px;
margin: 5px;
}
article {
height: 500px;
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 blueviolet;
text-align: center;
font-size: 28px;
}
</style>
弹性元素
放在容器盒子中的元素即为容器元素
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
注意：
- 不能使用float与clear规则
- 弹性元素均为块元素
- 绝对定位的弹性元素不参与弹性布局
align-self属性
用于控制单个元素在交叉轴上的排列方式，align-items 用于控制容器中所有元素的排列，而 align-self 用于控制一个弹性元素的交叉轴排列
.box div{
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
| 选项 | 说明 |
|---|---|
| stretch | 将空间平均分配给元素 |
| flex-start | 元素紧靠主轴起点 |
| flex-end | 元素紧靠主轴终点 |
| center | 元素从弹性容器中心开始 |
使用stretch属性不能设置高度，否则没有效果
flex-grow属性
flex-glow:1;或flex-grow: inherit;
定义弹性盒子项（flex item）的拉伸因子，默认是0，即不进行拉伸
注意：如果弹性元素设置了宽度，将把（弹性盒子-弹性元素宽度和）后按照 flex-grow 进行分配
案例：小米布局
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
* {
margin: 0;
padding: 0;
}
body {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-between;
}
header {
height: 60px;
background: #9b59b6;
}
main {
/* 占满剩余空间 */
flex-grow: 1;
background: #ccc;
}
footer {
height: 60px;
background: #8e44ad;
}
</style>
</head>
<body>
<header>header</header>
<main>main</main>
<footer>footer</footer>
</body>
</html>
flex-basis属性
定义了元素占据的主轴空间，单位px或%
优先级:元素min-width > flex-basis > width
/* 指定<'width'> */
flex-basis: 10em;
flex-basis: 3px;
flex-basis: auto;
/* 固有的尺寸关键词 */
flex-basis: fill;
flex-basis: max-content;
flex-basis: min-content;
flex-basis: fit-content;
/* 在flex item内容上的自动尺寸 */
flex-basis: content;
/* 全局数值 */
flex-basis: inherit;
flex-basis: initial;
flex-basis: unset;
flex属性
flex是flex-grow, flex-shrink 和 flex-basis的简写，默认是0 1 auto，其中flex-grow不能省略
flex:auto;等价于flex:1 1 auto;
flex:none;等价于flex:0 0 auto;
建议使用flex，而不是这三个属性
order属性
定义元素的排列顺序，数值越小，排列越靠前，默认为0，可以负数或整数
flex-shrink属性
定义元素的缩小比例，默认为1，即如果空间不足，该元素将缩小
如果设置为0表示不缩小
弹性文本
文本节点也在弹性布局操作范围内
定位元素在弹性布局中的表现
- 绝对定位的弹性元素不参与弹性布局
- 相对定位的弹性元素仍受到弹性布局影响
案例
<main></main>
<footer>
<section>
<h4>教程</h4>
<ul>
<li>PHP</li>
<li>JAVA</li>
<li>Vue</li>
</ul>
</section>
<section>
<h4>礼品</h4>
<ul>
<li>T恤</li>
<li>键盘</li>
</ul>
</section>
<section>
<h4>用户中心</h4>
<ul>
<li>注销</li>
<li>反馈</li>
</ul>
</section>
</footer>
* {
margin: 0;
padding: 0;
}
body {
height: 100vh;
display: flex;
flex-direction: column;
}
main {
flex-grow: 1;
background: #f3f3f3;
}
footer {
height: 50px;
background: #eee;
display: flex;
flex-direction: row;
justify-content: space-between;
border-top: 1px solid #ccc;
}
footer section {
flex: 1;
display: flex;
flex-direction: column-reverse;
}
footer section:last-child {
border-right: none;
}
footer section h4 {
/* 第三个参数表示和主轴一样高 */
flex: 0 0 50px;
display: flex;
text-align: center;
flex-direction: column;
/* justify-content改变主轴对齐方式，flex-direction把主轴改为纵向 */
justify-content: center;
}
footer section ul {
display: flex;
flex-direction: column;
border: solid 1px #ccc;
text-align: center;
margin-bottom: 5px;
}
footer section ul li {
flex: 1 0 50px;
display: flex;
flex-direction: column;
justify-content: center;
border: solid 1px #ccc;
cursor: pointer;
}
footer section ul li:last-child {
border-bottom: none;
}
自动撑满空间
在弹性布局中对元素使用margin-right:auto 等形式可以自动撑满空间。下例为第一个ul设置 margin-right:auto 表示右侧空间自动撑满，第二个ul靠近父元素右边界
<div class="container">
<nav>
<ul>
<li>alfalfaw</li>
<li>视频教程</li>
<li>每晚直播</li>
<li>在线文档</li>
</ul>
<ul>
<li></li>
</ul>
</nav>
</div>
* {
padding: 0;
margin: 0;
}
.container {
width: 1200px;
margin: 0 auto;
}
nav {
display: flex;
border: solid 1px green;
margin-top: 20px;
align-items: center;
height: 60px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
background: #f3f3f3;
}
ul {
list-style: none;
}
ul:nth-child(1) {
display: flex;
align-items: center;
/* 自动撑开边距 */
margin-right: auto;
}
ul:nth-child(1) > li {
margin: 0 10px;
}
ul:nth-child(2) > li {
width: 50px;
height: 50px;
border-radius: 50%;
background: #9b59b6;
}
