FLEX组件可视化设计器CSS3代码生成器

Flex 布局可以简便、完整、响应式地实现各种页面布局，所以本软件研发出来 FLEX 组件。Flex 组件是本软件布局的核心，只有掌握好 flex 组件布局，你才能打造出优秀的个性化页面。

设计完成后整个布局及 CSS 样式代码都会生成。

排列方向 flex-direction

默认水平、水平逆序、垂直、垂直逆序

flex-direction: row | row-reverse | column | column-reverse;

对齐方式 justify-content

元素和容器的左端对齐、右端对齐、居中、元素之间保持相等的距离、元素周围保持相等的距离

justify-content: flex-start | flex-end | center | space-between | space-around;

纵轴 (交叉轴) 对齐 align-items
元素与容器的顶部（起点）对齐、元素与容器的底部 (终点) 对齐、元素纵向居中、元素在容器的基线位置显示、元素被拉伸以填满整个容器

align-items: flex-start | flex-end | center | baseline | stretch;

换行方式 flex-wrap
默认不换行 | 自动换成多行 | 自动换成逆序多行
flex-wrap: nowrap | wrap | wrap-reverse;

FLEX 组件简易用法

1. 拖动 FLEX 组件进设计器

2. 拖动文本内容进 FLEX 组件

FLEX 组件默认拖出来为垂直布局。拖动两个文件组件进 FLEX 组件容器里，修改文本组件内容分别为内容 1、内容 2。

3、修改排列方向为水平

修改属性为水平后，发现内容 1、内容 2 并没有水平显示。如果要强制水平需设置换行方式为不换行。

4、设置内容文本背景、字体大小

设置内容文本背景颜色、文本大小，方便我们来理解 FLEX 占比。

5、修改内容栅格大小

选择内容 2 组件，改变栅格大小，旁边内容 1 的占比会跟着变化。

6、对齐方式设置

对齐方式为了更好理解效果，我们把文本内容组件都栅格大小为 0。
都栅格为 0 后，两个内容并排挤一起，此时可以可以改对齐方式来查看不同的效果。

FLEX 组件是重个软件核心，FLEX 布局是必须要掌握的一个关键组件。
后面将在案例里，通过案例来教大家使用 FLEX 组件做到不同的效果，大家可以直接使用组件模板或页面模板来学习 FLEX 组件。
点击模板后直接会加到设计区，可以轻松修改模板改为自己所有。

FLEX 组件不同组合会实现不同的效果，大家应该灵活应用此组件

举例

三个不同大小组件水平居中

把三个不同大小子组件都栅格化到 0，然后灵活的应用居中属性。

三个不同大小组件垂直居中

FLEX 组件里面包含了图片、标题、描述三个组件，我们都把它栅格化到 0，然后利用对齐方式、纵轴对齐我们都用了两个属性居中对齐来控制。

标题组件下划线效果

FLEX 组件里包括了两个文本内容组件，为了更好实现下划线效果，我们用其中一个文本内容把内容清空，然后把高度固定为 6px，并设置外边距为负值，此时组件会压在上面的文本内容上面。然后巧妙应用样式里层级关系，把上面的标题层级调大一级，此时下划线就会变成在下面显示。

FLEX 子组件绝对定位使用

为了突出某个效果，我们可能要使用到绝对定位来控制。比如下方招聘效果组件模板，左上角有一个渐变效果的背景。

FLEX 组件我们固定了一个大小并设置了背景渐变样式

巧妙剩余占比大小样式使用

当我们把栅格化到 0 的时候，我们想其中一个子组件填满剩余占比，我们可以巧妙应用样式里填充剩余占比，样式会自动计算剩余宽度。

大家只有学会了 FLEX 布局，整个布局的核心，基本上能能变出任意自己想要的效果。点击组件模板里来实现组件实现原理来快速进阶。