前言
Flexbox(弹性盒子)是 CSS3 中引入的一种强大且兼容性好的布局方法。
使用 flexbox,我们可以很容易地处理好页面上的元素布局,并创建可以自动缩小和放大的动态用户界面。
flex-direction
给元素添加 display: flex
属性可以让它变成 flex 容器, 然后可以让元素的项目排列成行或列。
属性值设置为 row 或 column,即可横向排列或纵向排列它的所有子元素。
值 | 描述 |
row | 默认值。flex 项目将水平显示,正如一个行一样。 |
row-reverse | 与 row 相同,但是以相反的顺序。 |
column | 灵活的项目将垂直显示,正如一个列一样。 |
column-reverse | 与 column 相同,但是以相反的顺序。 |
justify-content
flex 子元素有时不能充满整个 flex 容器, 可以通过 justify-content
属性的不同值来实现告诉 CSS 以什么方式排列 flex 子元素。
子元素排列的方向被称为 main axis(主轴)。 对于行,主轴水平贯穿每一个项目; 对于列,主轴垂直贯穿每一个项目。
值 | 描述 Playit (runoob.com) |
flex-start | 默认值。从 flex 容器的起始位置开始排列项目。 对行来说是把项目移至左边, 对于列是把项目移至顶部。 |
flex-end | 从 flex 容器的终止位置开始排列项目。 对行来说是把项目移至右边, 对于列是把项目移至底部。 |
center | flex 子元素在 flex 容器中居中排列。 |
space-between | 项目间保留一定间距地沿主轴居中排列。 第一个和最后一个项目被放置在容器边沿。 例如,在行中第一个项目会紧贴着容器左边,最后一个项目会紧贴着容器右边,然后其他项目均匀排布。 |
space-around | 与 space-between 相似,但头尾两个项目不会紧贴容器边缘,所有项目之间的空间均匀排布。 |
space-evenly | 头尾两个项目不会紧贴容器边缘,所有项目之间的空间均匀排布。 |
align-items
Flex 容器中,与主轴垂直的叫做 cross axis(交叉轴)。 行的交叉轴是垂直的,列的交叉轴是水平的。
align-items
属性用来定义 flex 子元素沿交叉轴的对齐方式。
对行来说,定义的是元素的上下对齐方式; 对列来说,是定义元素的左右对齐方式。
Attributes | Description Playit (runoob.com) |
stretch | 默认值。拉伸项目,填满 flex 容器。 例如,排成行的项目从容器顶部拉伸到底部。 |
center | 把项目居中放置。 对行来说,垂直居中(项目距离顶部和底部的距离相等); 对列来说,水平居中(项目距离左边和右边的距离相等)。 |
flex-start | 从 flex 容器的起始位置开始对齐项目。 对行来说,把项目移至容器顶部; 对列来说,是把项目移至容器左边。 |
flex-end | 从 flex 容器的终止位置开始对齐项目。 对行来说,把项目移至容器底部; 对列来说,把项目移至容器右边。 |
baseline | 沿基线对齐。 基线是文本相关的概念,可以认为它是字母排列的下端基准线。 |
flex-wrap
以我的理解就是截断,如同 JetBrains 的软件设置里通常会有的 Hard-wrap ,用来设置每行最多有多少字符,会在你格式化代码 Ctrl+Alt+L 的时候强制插入换行符,形成显示效果上的换行。
默认情况下,flex 容器会调整项目大小,把它们都塞到一起。 对于行来说,所有项目都会在一条直线上。
使用 flex-wrap
属性可以使项目换行展示。 这意味着多出来的子元素会被移到新的行或列。 换行发生的断点由子元素和容器的大小决定。
值 | 描述 |
nowrap | 默认值,不换行。 |
wrap | 如果排列以行为基准,就将行从上往下排列; 如果排列以列为基准,就将列从左往右排列。 |
wrap-reverse | 如果排列以行为基准,就将行从下往上排列; 如果排列以列为基准,就将列从右往左排列。 |
Child Elements
以上提到的属性都应用于 flex 容器(flex 子元素的父元素),下面讲一些子元素的实用属性。
flex-shrink
使用之后,如果 flex 容器太小,则子元素会自动缩小。
当容器的宽度小于里面所有子元素的宽度之和时,所有子元素都会自动压缩。
子元素的 flex-shrink
接受数值作为属性值。 数值越大,则该元素与其他元素相比会被压缩得更厉害。
比如,一个项目的 flex-shrink
属性值为 1,另一个项目的 flex-shrink
属性值为 3 ,那么后者相比前者会受到 3 倍压缩。
flex-grow
flex-shrink
会在容器太小时对子元素作出调整。
相应地,flex-grow
会在容器太大时对子元素作出调整。
如果一个项目的 flex-grow
属性值为 1,另一个项目的 flex-grow
属性值为 3,那么值为 3 的一个会较另一个扩大 3 倍。
flex-basis
flex-basis
属性定义了在使用 CSS 的 flex-shrink
或 flex-grow
属性对元素进行调整前,元素的初始大小。
flex-basis
属性的单位与其他表示尺寸的属性的单位一致(px
、em
、%
等)。 如果值为 auto
,则项目的尺寸随内容调整。
可以三种属性值一起设置:例如,
flex: 1 0 10px;
会把项目属性设为
flex-grow: 1;
、flex-shrink: 0;
以及flex-basis: 10px;
。默认设置是
flex: 0 1 auto;
。
order
默认情况下,项目排列顺序与源 HTML 文件中顺序相同。
order
属性表明 CSS flex 容器里子元素的顺序。接受数字作为参数,可以使用负数。
align-self
align-self
允许你调整单个子元素自己的对齐方式,而不会影响到全部子元素。
可设置的值与 align-items
的一样,并且它会覆盖 align-items
所设置的值。
因为 float
、clear
和 vertical-align
等调整对齐方式的属性都不能应用于 flex 子元素,所以这个属性显得十分有用。
游戏推荐
Play Flex Box Adventure – CSS Game to Learn Flexbox (codingfantasy.com)