参考：
flex 布局的基本概念 - CSS：层叠样式表 | MDN (mozilla.org)
flex布局 - 简书 (jianshu.com)
这是总结关键字
| 关键字 | 属性 | 注释 |
|---|---|---|
| display | flex | 标记flex布局 |
| flex-direction | row row-reverse column column-reverse |
方向：决定了flex 方向主轴是横向还是竖向 |
| flex-wrap | wrap | 换行：里面内容太大而无法全部显示在一行中，则会换行显示 |
| flex-flow | row wrap | 简写：属性支持换行和模式,兼容[flex-direction flex-wrap] |
| flex-grow | 0到∞ | 占比：让所有元素分割不同占比 |
| flex-shrink | 0到∞ | 收缩：flex 元素仅在默认宽度之和大于容器的时候才会发生收缩 |
| flex-basis | auto; 参照我的width和height属性 max-content; 内容有多宽，盒子就有多宽，不会顾及父级盒子有多宽，只满足自己的需求 min-content; 装下单个最大内容的最小宽度，中文是一个，英文是一个单词 fit-content; 在不超过父级盒子宽度的情况下，尽量撑开盒子满足自己的需求 content; content代表自动尺寸 0; 0比min占用的空间更少 200px; 200px的空间 |
|
| Flex 属性的简写1 | 1 1 auto | 简写形式允许你把三个数值按这个顺序书写：flex-grow，flex-shrink，flex-basis |
| Flex 属性的简写2 | flex: initial = flex: 0 1 auto flex: auto = flex: 1 1 auto flex: none = flex: 0 0 auto flex: <positive-number> = flex: number 1 0 |
|
| align-items | stretch：铺满交叉轴，根据内容铺满 flex-start：交叉轴如果是竖向，就居上，也是默认值 flex-end: 交叉轴如果是竖向，就居下 center： 交叉轴如果是竖向，就上下居中 |
|
| justify-content | stretch：铺满主轴，根据内容铺满 flex-start：主轴如果是横向，就居左，也是默认值 flex-end: 主轴如果是横向，就居右 center： 主轴如果是横向，就左右居中 space-around：主轴如果是横向，就左右以平衡的方式分散 space-between：主轴如果是横向，就左右以平衡的方式分散，但是最左边跟最右边的两个控件是靠边的 |
首先Flex要明白有主轴、交叉轴
默认横向主轴，竖向交叉轴
默认横向主轴
竖向交叉轴竖向交叉轴
Flex 容器
image.png
.box {
display: flex;
}
<div class="box">
<div>One</div>
<div>Two</div>
<div>Three
<br>has
<br>extra
<br>text
</div>
</div>
更改 flex 方向 flex-direction
image.png
.box {
display: flex;
flex-direction: row-reverse;
}
<div class="box">
<div>One</div>
<div>Two</div>
<div>Three</div>
</div>
竖向 flex-direction
image.png
flex-direction: column;
用 flex-wrap 实现多行 Flex 容器
image.png
.box {
display: flex;
flex-wrap: wrap;
}
<div class="box">
<div>One</div>
<div>Two</div>
<div>Three</div>
</div>
简写属性 flex-flow 支持换行和模式
image.png
.box {
display: flex;
flex-flow: row wrap;
}
<div class="box">
<div>One</div>
<div>Two</div>
<div>Three</div>
</div>
flex-grow 占比模式
通过占比让所有元素分别占据不同占比
image.png
flex-shrink 缩小占比模式
#content {
display: flex;
width: 500px;
}
#content div {
flex-basis: 120px;
border: 3px solid rgba(0, 0, 0, .2);
}
.box {
flex-shrink: 3;
}
.box1 {
flex-shrink: 1;
}
<p>整个宽度为500px,而每个div 120px,当5个div的总宽度超过500px后,通过占比划分不同宽度,占比越高,就缩小越多</p>
<div id="content">
<div class="box" style="background-color:red;">A</div>
<div class="box" style="background-color:lightblue;">B</div>
<div class="box" style="background-color:yellow;">C</div>
<div class="box1" style="background-color:brown;">D</div>
<div class="box1" style="background-color:lightgreen;">E</div>
</div>
image.png
flex-basis 数值决定大小
.container {
font-family: arial, sans-serif;
margin: 0;
padding: 0;
list-style-type: none;
display: flex;
flex-wrap: wrap;
}
.flex {
background: #6AB6D8;
padding: 10px;
margin-bottom: 50px;
border: 3px solid #2E86BB;
color: white;
font-size: 20px;
text-align: center;
position: relative;
}
.flex:after {
position: absolute;
z-index: 1;
left: 0;
top: 100%;
margin-top: 10px;
width: 100%;
color: #333;
font-size: 18px;
}
.flex1 {
flex-basis: auto;
}
.flex1:after {
content: 'auto';
}
.flex2 {
flex-basis: max-content;
}
.flex2:after {
content: 'max-content';
}
.flex3 {
flex-basis: min-content;
}
.flex3:after {
content: 'min-content';
}
.flex4 {
flex-basis: fit-content;
}
.flex4:after {
content: 'fit-content';
}
.flex5 {
flex-basis: content;
}
.flex5:after {
content: 'content';
}
.flex6 {
flex-basis: fill;
}
.flex6:after {
content: 'fill/-webkit-fill-available/-moz-available';
}
<ul class="container">
<li class="flex flex1">1: flex-basis test</li>
<li class="flex flex2">2: flex-basis test</li>
<li class="flex flex3">3: flex-basis test</li>
<li class="flex flex4">4: flex-basis test</li>
<li class="flex flex5">5: flex-basis test</li>
</ul>
<ul class="container">
<li class="flex flex6">6: flex-basis test</li>
</ul>
image.png
flex-basis有不同属性作用：
- flex-basis: auto; 参照我的width和height属性
- flex-basis: max-content; 内容有多宽，盒子就有多宽，不会顾及父级盒子有多宽，只满足自己的需求
- flex-basis: min-content; 装下单个最大内容的最小宽度，中文是一个，英文是一个单词
- flex-basis: fit-content; 在不超过父级盒子宽度的情况下，尽量撑开盒子满足自己的需求
- flex-basis: content; content代表自动尺寸
- flex-basis: 0; 0比min占用的空间更少
- flex-basis: 200px; 200px的空间
Flex 属性的简写
.box {
display: flex;
}
.one {
flex: 1 1 auto;
}
.two {
flex: 1 1 auto;
}
.three {
flex: 1 1 auto;
}
<div class="box">
<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>
</div>
image.png
Flex 简写形式允许你把三个数值按这个顺序书写 — flex-grow，flex-shrink，flex-basis。
- flex-grow。赋值为正数的话是让元素增加所占空间
- flex-shrink — 正数可以让它缩小所占空间，但是只有在 flex 元素总和超出主轴才会生效
- flex-basis；flex 元素是在这个基准值的基础上缩放的。
以下几种模式更加简写
- flex: initial = flex: 0 1 auto
- flex: auto = flex: 1 1 auto
- flex: none = flex: 0 0 auto
- flex: <positive-number> = flex: number 1 0
align-items
.box {
display: flex;
align-items: flex-start;
}
<div class="box">
<div>One</div>
<div>Two</div>
<div>Three
<br>has
<br>extra
<br>text
</div>
</div>
image.png
align-items代表着里面的控件交叉轴对齐方式，跟
flex-direction有点不一样
- stretch：铺满交叉轴，根据内容铺满
- flex-start：交叉轴如果是竖向，就居上，也是默认值
- flex-end: 交叉轴如果是竖向，就居下
- center： 交叉轴如果是竖向，就上下居中
justify-content
.box {
display: flex;
justify-content: space-between;
}
<div class="box">
<div>One</div>
<div>Two</div>
<div>Three</div>
</div>
image.png
justify-content代表着里面的控件主轴对齐方式，跟
flex-direction有点不一样
- stretch：铺满主轴，根据内容铺满
- flex-start：主轴如果是横向，就居左，也是默认值
- flex-end: 主轴如果是横向，就居右
- center： 主轴如果是横向，就左右居中
- space-around：主轴如果是横向，就左右以平衡的方式分散
- space-between：主轴如果是横向，就左右以平衡的方式分散，但是最左边跟最右边的两个控件是靠边的
控制对齐的属性
.box {
width: 1000px;
height: 1000px;
display: flex;
align-items: center;
justify-content: center;
}
.box div {
width: 100px;
height: 100px;
}
image.png
-
justify-content- 控制主轴（横轴）上所有 flex 项目的对齐。 -
align-items- 控制交叉轴（纵轴）上所有 flex 项目的对齐。 -
align-self- 控制交叉轴（纵轴）上的单个 flex 项目的对齐。 -
align-content- 控制“多条主轴”的 flex 项目在交叉轴的对齐。
网友评论