DO RUBY
Search…
FlexBox 使用向导

简介

Flexbox 布局模块提供一个容器,使其中的元素,可以采用更便捷的方法实现布局、对齐、分布间距等方式。甚至当大小不定时,可以自动伸缩(它们称为"flex")
它的思想主要是基于 flex layout,调整容器里的元素宽/高,填充合适空格(更多用于不同设备的屏幕的适配)。

基本述语

在了解 Flexbox 述语前,有必要先看看 CSS 中关于 inline-block 的介绍
Flexbox 是一个完整的模块,不是一个单一属性,它包含了很多设置属性。 它们中的一些被设置为容器(父元素,被称为 "flex container"),其它一些被设置为子元素(称为 "flex items")
对于规则的布局是基于两块之间的相对方向流线性布局,这个 flex layout 是基于 "flex-flow 方向"。 请看下图以更好解释它。
基本上它会基于主轴(从main-start 到 main-end)或交叉轴(从cross-start 到 cross-end)方向排列它们。
  • main axis flex容器的主轴主要用于排列它的元素。不过要注意,它不一定是水平方向,它依赖于 flex-direction 属性 (见下面说明)
  • main-start | main-end flex 容器里的元素放置从main-start 开始到 main-end 结束
  • main-size flex 元素的宽或高,有 width 与 height 属性
  • cross axis 与主轴相交的即为交叉轴。它的方向依赖与主轴方向
  • cross-start | cross-end Flex 基于 cross-start 与 cross-end 排列它的元素
  • cross size 一个 flex 元素的宽或高

容器

容器属性

display

定义一个 flex 容器,给定值指定是内联(inline)或者块(block)。它可以打开一个 flex 环境用来决定元素的填充方式。
1
.container {
2
display: flex; /* 或 inline-flex */
3
}
Copied!

flex-direction

决定主轴方向
1
.container {
2
flex-direction: row | row-reverse | column | column-reverse;
3
}
Copied!
  • row (默认): 从左到右
  • row-reverse: 从右到左
  • column: 从上到下
  • column-reverse: 从下到上

flex-wrap

默认情况下 flex 元素会在一行显示. 你可以更变属性决定折行与折行的方向
1
2
.container {
3
flex-wrap: nowrap | wrap | wrap-reverse;
4
}
Copied!
  • nowrap (默认): 单行
  • wrap: 折行
  • wrap-reverse: 反向折行

justify-content

决定如何在主轴上分布空白区域
1
2
.container {
3
justify-content: flex-start | flex-end | center | space-between | space-around;
4
}
Copied!
  • flex-start (默认):基于 start line 排列
  • flex-end: 基于 end line 排列
  • center: 居中
  • space-between: 均匀的分布间距,第一个元素在首行,最后一个在未行
  • space-around: 均匀的分布空白区域在各元素周围

align-items

决定交叉轴的排列方式
1
2
.container {
3
align-items: flex-start | flex-end | center | baseline | stretch;
4
}
Copied!
  • flex-start
  • flex-end
  • center
  • baseline
  • stretch (默认)

align-content

类似于 justify-content ,交叉轴的内容排列
-- 如果只有一行时没有效果
1
2
.container {
3
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
4
}
Copied!
  • flex-start
  • flex-end
  • center
  • space-between
  • space-around
  • stretch (默认)

元素

元素属性

order

默认情况下,flex 元素,按来源顺序排列和个元素,你也可以分别指定元素的 order 属性来重新排列出现的顺序。
1
2
.item {
3
order: ;
4
}
Copied!

flex-grow

决定各元素的你伸长比例,它是一个无符号单位。如果所有元素都设置为 1 ,它们将会是同一大小的排列在容器里。如果你给定一个值是2,那他会针对其他对象的两倍。
1
2
.item {
3
flex-grow: ; /* 默认是 0 */
4
}
Copied!

flex-basis

1
2
.item {
3
flex-basis: | auto; /* default auto */
4
}
Copied!

flex

快捷方式 flex-grow, flex-shrink and flex-basis 这三个属性。第二和第三个参数为可选, 默认为 0 1 auto
1
2
.item {
3
flex: none | [ ? || ]
4
}
Copied!

align-self

可以指定某个元素的排列行为,请参考 align-items 解释
1
2
.item {
3
align-self: auto | flex-start | flex-end | center | baseline | stretch;
4
}
Copied!

示例

解决一个经常会遇到的问题:完美居中
1
2
.parent {
3
display: flex;
4
height: 300px; /* Or whatever */
5
}
6
7
.child {
8
width: 100px; /* Or whatever */
9
height: 100px; /* Or whatever */
10
margin: auto; /* Magic! */
11
}
Copied!

其它相关资源

Last modified 1yr ago