CSS 弹性盒子
-
display: flex
定位两个盒子。
row
(默认值):主轴为水平方向,起点在左端。
row-reverse
:主轴为水平方向,起点在右端。
column
:主轴为垂直方向,起点在上沿。
column-reverse
:主轴为垂直方向,起点在下沿。 -
flex-direction:row;
一个行 -
flex-direction:column;
创建一列 -
对于如何沿主轴线排放 flex 项目,有几种选择。 很常用的一种是 justify-
content: center;
:即 flex 子元素在 flex 容器中居中排列。 其他选择包括:
flex-start
:从 flex 容器的起始位置开始排列项目。 对行来说是把项目移至左边, 对于列是把项目移至顶部。 如未设置 justify-content 的值,那么这就是默认值。
flex-end
:从 flex 容器的终止位置开始排列项目。 对行来说是把项目移至右边, 对于列是把项目移至底部。
space-between
:项目间保留一定间距地沿主轴居中排列。 第一个和最后一个项目被放置在容器边沿。 例如,在行中第一个项目会紧贴着容器左边,最后一个项目会紧贴着容器右边,然后其他项目均匀排布。
space-around
:与space-between
相似,但头尾两个项目不会紧贴容器边缘,所有项目之间的空间均匀排布。
space-evenly
:头尾两个项目不会紧贴容器边缘,所有项目之间的空间均匀排布。
-
align-items
属性与justify-content
类似。justify-content
属性使 flex 子元素沿主轴排列。 行的主轴是水平线,列的主轴是垂直线。Flex 容器中,与主轴垂直的叫做 cross axis(交叉轴)。 行的交叉轴是垂直的,列的交叉轴是水平的。CSS 中的align-items
属性用来定义 flex 子元素沿交叉轴的对齐方式。 对行来说,定义的是元素的上下对齐方式; 对列来说,是定义元素的左右对齐方式。
align-items
的可选值包括:
flex-start
:从 flex 容器的起始位置开始对齐项目。 对行来说,把项目移至容器顶部; 对列来说,是把项目移至容器左边。
flex-end
:从 flex 容器的终止位置开始对齐项目。 对行来说,把项目移至容器底部; 对列来说,把项目移至容器右边。
center
:把项目居中放置。 对行来说,垂直居中(项目距离顶部和底部的距离相等); 对列来说,水平居中(项目距离左边和右边的距离相等)。
stretch
:拉伸项目,填满 flex 容器。 例如,排成行的项目从容器顶部拉伸到底部。 如未设置align-items的值,那么这就是默认值。
baseline
:沿基线对齐。 基线是文本相关的概念,可以认为它是字母排列的下端基准线。 -
lex-wrap
属性包裹一行或一列
CSSflexbox
有一个把flex
子元素拆分为多行(或多列)的特性。 默认情况下,flex
容器会调整项目大小,把它们都塞到一起。 对于行来说,所有项目都会在一条直线上。
不过,使用flex-wrap
属性可以使项目换行展示。 这意味着多出来的子元素会被移到新的行或列。 换行发生的断点由子元素和容器的大小决定。
换行方向的可选值有这些:
nowrap
:默认值,不换行。
wrap
:如果排列以行为基准,就将行从上往下排列;如果排列以列为基准,就将列从左往右排列。
wrap-reverse
:如果排列以行为基准,就将行从下往上排列;如果排列以列为基准,就将列从右往左排列。 -
使用
flex-shrink
属性定义 flex 子元素的收缩规则
目前为止,挑战里提到的属性都是应用于 flex 容器(flex 子元素的父元素)的。 除此之外,flex 子元素也有很多实用属性。
flex-shrink
属性。 使用之后,如果 flex 容器太小,则子元素会自动缩小。 当容器的宽度小于里面所有子元素的宽度之和时,所有子元素都会自动压缩。
子元素的flex-shrink
接受数值作为属性值。 数值越大,则该元素与其他元素相比会被压缩得更厉害。 比如,一个项目的flex-shrink
属性值为 1,另一个项目的flex-shrink
属性值为 3,那么后者相比前者会受到 3 倍压缩。