1 Flex简介

1.1 Flex功能

1、能够以弹性尺寸来适应显示空间，轻轻松松占满你的屏幕。

2、改变子元素在各个方向上的排列，叫你往东，你不敢往西。

3、子元素太大或者太小时，可设置拉伸、收缩比例，想胖就胖，想瘦就瘦，把身材控制得死死的。

4、子元素太多，放不下，怎么换行，由你说了算。

Flex这么强大、这么好用，那它到底应该如何使用？为了让大家能够理解和灵活应用，就讲点内功心法。

1.2 Flex布局基本概念

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

在 flex 容器中默认存在两条轴，水平主轴(main axis) 和垂直的交叉轴(cross axis)，这是默认的设置，你可以通过修改使垂直方向变为主轴，水平方向变为交叉轴。

在苍穹平台的设计器里，可以使用样式属性中的布局方向来控制主轴的方向（flex item的排列方向）。

通过设置Flex容器的属性控制子项（flex item）布局，相关属性功能如下：

•【flex-direction】改变默认排列方向, 设置水平还是垂直布局

•【justify-content】子元素在主轴的排列方式，设置对齐方式

•【align-items】子元素在侧轴的排列方式，设置侧轴对齐方式

•【flex-group/ flex-shrink/ flex-wrap】超出父容器子容器的排列方式

小蔡是一个前端小白，flex的概念又晦涩难懂，看完上面内容还是一脸懵，在苍穹平台中该如何使用呢？

苍穹平台已经封装了一个Flex容器，该flex容器提供了最常用的布局方案以及属性封装，让你更低门槛地使用Flex布局。

那么该如何在苍穹设计器中使用Flex布局呢，请继续听小编分解~

2 如何在苍穹设计器中使用Flex布局

2.1 常用布局方案

在选中任意Flex容器后，在控件属性中提供了如下12种常用的布局方案，只需点选对应的图例就直接给该Flex容器设置好了布局。

该方式满足大部分的布局场景，让你无需了解Flex核心概念也可以做出常用效果。

（图例说明：箭头代表的是布局的方向，由上至下代表垂直布局，从左到右代表水平布局。红线代表的是对齐的位置，靠左、居中、靠右等）

2.2 Flex容器高级设置

在设置复杂页面布局时，以上12种方案无法满足你的要求，这时需要用到Flex高级设置功能。

高级设置功能提供了“布局方向”、“对齐方式”、“是否换行”等功能的设置，同时提供了实时预览效果，如下图：

布局方向：水平or垂直，布局方向决定子项的排列方向

对齐方式：分别设置水平方向和垂直方向的对齐方式

设置水平方向的对齐方式：

设置垂直方向的对齐方式：

是否换行：开启多行多列则一行或者一列排不完的情况下，自动换行或者换列。

结合Flex容器提供的常用布局和高级设置，小蔡基本能随心所欲地在苍穹设计器中轻松使用Flex容器了。

这时他的导师老汪对小蔡说，还要掌握控件的压缩（flex-shrink）和扩展（flex-group）比例属性才能算完整掌握Flex布局。

2.3 什么是压缩和扩展比例

每个控件都支持设置扩展比例和压缩比例这两个参数，这两个参数分别是控制子项在Flex容器中出现剩余空间或者空间不够时的表现形式。

扩展比率：父容器空间有剩余时，定义子项占剩余空间的比率。

上图所示给3个子项设置的扩展比例都为1，当容器有剩余空间，子项会1：1：1的扩大，从而瓜分掉剩余空间。

当设置扩展比例为0的时候，不参与瓜分剩余空间。扩展比例越大，瓜分剩余空间的比例越大。

压缩比率：父容器空间不足时，定义子项要压缩的比例。

子项要压缩的前提是父容器不能换行，如果压缩比例设置为0，子项大小超出父容器大小，子项的大小不变，而父容器为了显示所有子项则出现滚动条。

如果子项压缩比例设置为1，同时容器大小不够显示所有子项时，子项则会按比例压缩。

Flex布局的常用设置和属性到这里就介绍完啦，想深入地了解Flex布局原理，可点击此处查看。

#往期推荐#

# 只有1%的人了解的日期格式，你学会了吗？

# 原来苍穹主题还可以这样玩～

更多精彩内容，“码”上了解！↓

学完这篇，苍穹页面布局so easy！

学完这篇，苍穹页面布局so easy！

恭喜您！