0%

Flex布局(上)

前言

在跨平台框架 taro 中,如果要将代码编译成 react native 代码,必须使用 Flex 布局,使用传统布局将会编译失败。

Flexbox,弹性盒布局模块,所有主流浏览器都支持,下面举例,对比传统布局实现水平居中布局:

传统布局:

1
2
3
4
5
6
7
8
9
.parent {
position: relative;
}
.children {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

Flexbox 布局:

1
2
3
4
5
.parent {
display: flex;
justify-content: center;
align-items: center;
}

相较于传统基于盒模型的布局方案,Flexbox 布局语义清晰,更为简洁。那么 Flexbox 布局具体有哪些属性,每个属性又有什么作用呢,下面我带大家逐一过一遍。

容器

想要使用 Flexbox 布局,我们先要找一个元素将它指定为容器,然后就可以通过不同的容器属性,规定容器内 item 项目(子元素)的水平垂直排列(默认是从上到下,从左到右)、对齐方式等一些较为大力度的规则。容器内的项目,通过项目属性,可以进一步达到更细粒度的控制,后面会讲到。

1
display: flex/inline-flex;

注意,设为 Flex 布局以后,子元素的 floatclearvertical-align 属性将失效。

容器属性

flex-direction

主轴方向,项目排列方向

  • row - 水平方向,从左到右
  • row-reverse - 水平方向,从右到左
  • column - 垂直方向,从上到下
  • column-reverse - 垂直方向,从下到上
1
flex-direction: row | row-reverse | column | column-reverse;

flex-wrap

项目超出容器后的换行方式

  • nowrap - 不换行
  • wrap - 换行,下一行从左往右排列
  • wrap-reverse - 换行,下一行从右往左排列
1
flex-wrap: nowrap | wrap | wrap-reverse;

flex-flow

flex-directionflex-wrap 的组合

1
flex-flow: <flex-direction> || <flex-wrap>;

justify-content

项目在主轴(横向轴)上的对齐方式,默认从左侧开始排列

  • flex-start - 从左往右
  • flex-end - 从右侧开始,从右往左
  • center - 从左往右,中间对齐
  • space-between - 从左往右,元素间均摊容器剩余空间
  • space-around - 从左往右,元素间均摊容器剩余空间,第一个和最后一个元素两侧都会均摊剩余空间,不会贴边
1
justify-content: flex-start | flex-end | center | space-between | space-around;

align-items

项目在交叉轴上的对齐方式

  • flex-start
  • flex-end
  • center
  • space-between
  • space-around
1
align-items: flex-start | flex-end | center | space-between | space-around;

align-content

  • flex-start
  • flex-end
  • center
  • space-between
  • space-around
  • stretch
1
align-content: flex-start | flex-end | center | space-between | space-around | stretch;

项目属性

order

项目排序,从小到大排列

1
order: <integer>;

flex-grow

项目增长,占据剩余空间的份数,默认是 0,不占据剩余空间

1
flex-grow: <number>; /* default 0 */

示例图片:

示例代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style>
section {
display: flex;
background-color: #000;
color: #fff;
font-size: 30px;
}
</style>

<section>
<div style="flex-grow: 1;background-color: crimson;">1</div>
<div style="width: 100px;">2</div>
<div>333</div>
<div style="flex-grow: 1;background-color: green;">4</div>
</section>

flex-shrink

项目收缩时,占收缩总量的份数,默认是 1,最小收缩至项目内容占据的最小宽度

1
flex-shrink: <number>; /* default 1 */

示例图片:

上图所示的容器,保持内容完整的最小宽度为:100 + 100 + 54 + 18 = 272

当浏览器窗口宽度缩小 15px 时,设置了 flex-shrink: 2; 的项目 1 的宽度由 100px 减少到了 90px,减少的宽度占本次减少宽度的 2/3

而未设置 flex-shrink 的项目 2,宽度由 100px 减少到了 95px,减少的宽度占本次减少宽度的 1/3

示例代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style>
section {
display: flex;
background-color: #000;
color: #fff;
font-size: 30px;
}
</style>

<section>
<div style="width: 100px;flex-shrink: 2;background-color: crimson;">1</div>
<div style="width: 100px;">2</div>
<div>333</div>
<div style="background-color: green;">4</div>
</section>

那么问题来了,细心的同学可能发现了,项目 1 和项目 2 的减少占比为什么不是 2/51/5 呢?

答案是:项目 3 和项目 4,没法再减少了。

在没有主动设置项目宽度的情况下,项目宽度由其内容所占据的宽度决定,默认情况下就是最小宽度。

flex-basis

项目的起始宽度,默认值为 auto,表示起始宽度由内容决定

1
flex-basis: <length> | auto; /* default auto */

flex

flex-growflex-shrinkflex-basis 组合

1
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

align-self

项目自身的对齐方式,默认继承容器 align-items 的值

  • auto
  • flex-start
  • flex-end
  • center
  • baseline
  • stretch
1
align-self: auto | flex-start | flex-end | center | baseline | stretch;

参考链接