Flexible Box 模型,通常被称为 flexbox,是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。本文给出了 flexbox 的主要特性。
我们说 flexbox 是一种一维的布局,是因为一个 flexbox 一次只能处理一个维度上的元素布局,一行或者一列。作为对比的是另外一个二维布局网格布局,以后会和大家讲到
目录
1,如何使用
2, Flexbox的两根轴线
3, Flex 容器
4,API以及用例
1,- 如何使用-因为css用法过于简单,所以先给大家介绍简单的使用方法,随后介绍一些重要的概念
block1
block2
block3
效果图如下:
2,- Flexbox的两根轴线
当使用 flex 布局时,首先想到的是两根轴线 — 主轴和交叉轴。主轴由 flex-direction
定义,另一根轴垂直于它。我们使用 flexbox 的所有属性都跟这两根轴线有关, 所以有必要在一开始首先理解它。
主轴
主轴由 flex-direction 定义,可以取4个值:
- row
- row-reverse
- column
- column-reverse
如果你选择了 row 或者 row-reverse,你的主轴将沿着 inline 方向延伸。
如果你选择了 row
或者 row-reverse
,你的主轴将沿着 inline 方向延伸。
选择 column
或者 column-reverse
时,你的主轴会沿着上下方向延伸 — 也就是 block 排列的方向。
交叉轴
[](https://developer.mozilla.org...
交叉轴垂直于主轴,所以如果你的flex-direction
(主轴) 设成了 row
或者 row-reverse
的话,交叉轴的方向就是沿着列向下的。
如果主轴方向设成了 column
或者 column-reverse
,交叉轴就是水平方向。
理解主轴和交叉轴的概念对于对齐 flexbox 里面的元素是很重要的;flexbox 的特性是沿着主轴或者交叉轴对齐之中的元素。
Flex 容器
文档中采用了 flexbox 的区域就叫做 flex 容器。为了创建 flex 容器, 我们把一个容器的 display
属性值改为 flex
或者 inline-flex。
完成这一步之后,容器中的直系子元素就会变为 flex 元素。所有CSS属性都会有一个初始值,所以 flex 容器中的所有 flex 元素都会有下列行为:
- 元素排列为一行 (
flex-direction
属性的初始值是row
)。 - 元素从主轴的起始线开始。
- 元素不会在主维度方向拉伸,但是可以缩小。
- 元素被拉伸来填充交叉轴大小。
flex-basis
属性为auto。
flex-wrap
属性为nowrap。
这会让你的元素呈线形排列,并且把自己的大小作为主轴上的大小。如果有太多元素超出容器,它们会溢出而不会换行。如果一些元素比其他元素高,那么元素会沿交叉轴被拉伸来填满它的大小。
Flex布局主要的API
display: flex; 规定元素应该生成flex的类型,直系子元素就会变为 flex 元素
flex-direction: row | column | row-reverse | column-reverse; 更改flex方向
为了更好地控制 flex 元素,有三个属性可以作用于它们:在使用这三个属性之前我们简单了解一下布局空白(available space)这个概念
flex-grow
定义了该元素的布局空白(available space)的基准值。 该属性的默认值是 auto 。此时,浏览器会检测这个元素是否具有确定的尺寸。 在上面的例子中, 所有元素都设定了宽度(width)为100px,所以 flex-basis 的值为100px。
如果没有给元素设定尺寸,flex-basis 的值采用元素内容的尺寸。这就解释了:我们给只要给Flex元素的父元素声明 display: flex ,所有子元素就会排成一行,且自动分配小大以充分展示元素的内容。
flex-shrink
flex-grow 若被赋值为一个正整数, flex 元素会以 flex-basis 为基础,沿主轴方向增长尺寸。这会使该元素延展,并占据此方向轴上的布局空白(available space)。如果有其他元素也被允许延展,那么他们会各自占据布局空白的一部分。
如果我们给上例中的所有元素设定 flex-grow 值为1, 容器中的布局空白会被这些元素平分。它们会延展以填满容器主轴方向上的空间。
flex-grow 属性可以按比例分配空间。如果第一个元素 flex-grow 值为2, 其他元素值为1,则第一个元素将占有2/4(上例中,即为 200px 中的 100px), 另外两个元素各占有1/4(各50px)。
flex-basis
属性 flex-basis 指定了 flex 元素在主轴方向上的初始大小。如果不使用 box-sizing 来改变盒模型的话,那么这个属性就决定了 flex 元素的内容盒(content-box)的宽或者高(取决于主轴的方向)的尺寸大小。"
这三个属性为了方便编码,我们一般都会混合着写在 flex
简写形式中:
block1
block2
block3
我们来看看flex元素自适应后的效果
flex元素对齐和空间分配
align-items
属性将所有直接子节点上的align-self值设置为一个组。 align-self属性设置项目在其包含块中的对齐方式。") 属性可以使元素在交叉轴方向对齐。
这个属性的初始值为stretch,这就是为什么flex元素会默认被拉伸到最高元素的高度。实际上,它们被拉伸来填满flex容器 —— 最高的元素定义了容器的高度。
你也可以设置align-items的值为flex-start,使flex元素按flex容器的顶部对齐, flex-end 使它们按flex容器的下部对齐, 或者center使它们居中对齐. 在实例中尝试——我给出了flex容器的高度,以便你可以看到元素在容器中移动。看看如果更改 align-items的值为下列值会发生什么:
stretch
flex-start
flex-end
center
block1
block2
block3
justify-content
属性用来使元素在主轴方向上对齐,主轴方向是通过 flex-direction
设置的方向。初始值是flex-start
,元素从容器的起始线排列。但是你也可以把值设置为flex-end
,从终止线开始排列,或者center
,在中间排列.
你也可以把值设置为space-between
,把元素排列好之后的剩余空间拿出来,平均分配到元素之间,所以元素之间间隔相等。或者使用space-around
,使每个元素的左右空间相等。
在实例中尝试下列justify-content
属性的值:
stretch
flex-start
flex-end
center
space-around
space-between
block1
block2
block3
最终效果: