首页 前端知识 FLEX组件可视化设计器CSS3代码生成器

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

2024-10-28 20:10:27 前端知识 前端哥 859 430 我要收藏

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组件我们固定了一个大小并设置了背景渐变样式

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

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

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

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

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

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

点击组件模板里来实现组件实现原理来快速进阶

转载请注明出处或者链接地址:https://www.qianduange.cn//article/19385.html
标签
flex布局
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!