目录
传统盒模型
Flexbox 布局方式
Flexbox 核心概念
Flex 容器属性
-
flex-direction
:项目元素排列的方向 -
flex-wrap
:项目元素排列方式 -
justify-content
: 项目在主轴上的对齐方式 -
align-items
:项目在交叉轴上的对齐方式 -
align-content
:多行项目的排列方式
Flex 项目属性
-
order
:项目的排列顺序 -
flex-grow
: 项目的放大比例 -
flex-basis
:项目在主轴上的空间 -
align-self
:项目的对齐方式
正文
-
传统盒模型 :通过
display、float
等参数来配置具体的布局,这种方式代码简单,但是在处理实现诸如垂直居中、弹性宽度和高度等特性时会极为麻烦。 -
Flexbox 布局方式 :可以快速的实现上述各种场景,以及更多非常常用的排版需求,例如:
— 竖排元素
— 元素左侧/右侧竖向对齐
Flexbox 核心概念
- 在进行Flexbox 布局时,核心的属性包括容器和项目:
— 容器 : Flexbox 中外部的容器
— 项目 : Flexbox 中内部的项目
通过设置容器的参数,来实现内部项目按一定的顺序来进行排布:
![这里写图片描述](https://i-blog.csdnimg.cn/blog_migrate/9a78b0e47e847e891991a636a7de1e43.png)
Flex 容器属性
- 通过设置 Flex 容器的属性,可以设置容器内各项目的样式
— flex-direction
:项目元素排列的方向
① 值为 row
: 内部项目从左向右排列
② 值为 row-reverse
:内部项目反转横向排列
③ 值为 column
:内部项目纵向对齐
④ 值为 column-reverse
:内部项目反转纵向对齐
— flex-wrap
:项目元素排列方式
① 值为 nowrap
: 项目元素不会溢出,也不会自动换行
② 值为 wrap
: 当项目元素的宽度超出容器的时候,就会自动换行
③ 值为 wrap-reverse
:子元素溢出容器时会反转自动换行
— justify-content
: 项目在主轴上的对齐方式
① 值为 flex-start
:项目从主轴的开始位置对齐
② 值为 flex-end
: 项目从主轴的结束位置对齐
③ 值为 center
:项目从主轴的中间开始对齐
④ 值为 space-between
:各项目之间保持相同的距离进行排布
⑤ 值为 space-around
:不仅各项目间保持相同的距离,且在两侧也会有一定的距离来保持排列
— align-items
:项目在交叉轴上的对齐方式
① 值为 flex-start
:交叉轴的起点对齐
② 值为 flex-end
:交叉轴的终点对齐
③ 值为 center
:交叉轴的中点对齐
④ 值为 baseline
:当交叉轴与行内轴为同一条时,等价于 flex-start
;其他情况下以项目的第一行文字的基线对齐
⑤ 值为 stretch
(默认值):如果项目未设置高度或设置为auto
,则沾满整个容器的高度。(同时收宽度和高度的限制)
— align-content
:多行项目的排列方式(定义多跟轴线的对齐方式,如果项目只有一根轴线,该属性不起作用)
① 值为 flex-start
:与交叉轴的起点对齐
② 值为 flex-end
:与交叉轴的终点对齐
③ 值为 center
:与交叉轴的中点对齐
④ 值为 space-between
:与交叉轴两端对齐,轴线之间的距离平均分布
⑤ 值为 space-around
:每根轴线两侧的间隔都相等,所以,轴线之间的间隔比轴线与边框之间的间隔大一倍
⑥ 值为 stretch
(默认值):各行平均分配。轴线占满整个交叉轴(同时受宽度和高度的影响)
Flex 项目属性
- 通过设置 flex 项目属性,我们可以控制各项目自己的属性
— order
:项目的排列顺序 (值越小,排列越靠前,默认为0)
— flex-grow
: 项目的放大比例(默认为0,即如果有剩余空间,也不放大)
— flex-shrink
:项目的缩小比例 (默认为1,即如果空间不足,则项目将缩小)
如果所有的项目 flex-shrink
属性都为1
,则空间不够时,都将等比例缩小。如果一个项目的 flex-shrink
属性为0
,其他项目都为1
,则空间不足时,前者不缩小。
— flex-basis
:项目在主轴上的空间 (默认为auto
,即项目本来的大小),它可以设为跟 width 或 height 一样的
值,如 150px ,则项目将占据固定空间。
— align-self
:项目的对齐方式,通过设置此属性,可以让项目和其他项目有不同的排列方式,可覆盖 align-items
属性。默认值为 auto
,表示继承父元素的 align-items
属性,如果没有父元素,则等同于 stretch
。此属性有下图中的6
个值可选择(除auto
外,其他与align-items
可选值相同)。