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

简介: 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布局,整个布局的核心,基本上能能变出任意自己想要的效果。点击组件模板里来实现组件实现原理来快速进阶。

目录
相关文章
|
1月前
|
前端开发 UED 容器
在 CSS 中使用 Flex 布局实现页面自适应时需要注意什么?
【10月更文挑战第22天】在使用 Flex 布局实现页面自适应时,需要对其基本原理和特性有深入的理解,同时结合具体的布局需求和场景,进行细致的调整和优化。通过合理的设置和注意事项的把握,才能实现理想的自适应效果,提升用户体验。还可以根据实际情况进行更深入的探索和实践,以不断提升 Flex 布局的应用能力。
|
22天前
|
开发者 UED 容器
鸿蒙next版开发:ArkTS组件通用属性(Flex布局)
在HarmonyOS next中,ArkTS的Flex布局是一种强大且灵活的布局方式,支持水平或垂直方向排列元素,并能动态调整大小和位置以适应不同屏幕。主要属性包括justifyContent、alignItems、direction和wrap,适用于导航栏、侧边栏和表单等多种场景。示例代码展示了如何使用这些属性创建美观的布局。
59 10
|
2月前
|
前端开发 JavaScript
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
195 1
|
2月前
|
前端开发 开发者 容器
CSS3:flex&box-sizing
本文介绍了CSS中的Flex布局及其相关属性,如`flex-direction`、`flex-wrap`、`justify-content`等,并通过代码示例展示了如何使用这些属性来控制容器内的项目排列方式。同时,还讲解了`align-items`属性用于定义子元素在交叉轴上的对齐方式,以及`box-sizing`属性的不同取值对元素尺寸计算的影响。
|
2月前
|
数据可视化 前端开发 数据安全/隐私保护
DIY可视化快速组件CSS样式设计生成源码
DIY可视化快速组件CSS样式设计生成源码
32 0
|
2月前
|
数据可视化 前端开发
强大CSS3可视化代码生成器
强大CSS3可视化代码生成器
36 0
|
2月前
|
前端开发 JavaScript
uniapp纯CSS实现圆形进度条组件
uniapp纯CSS实现圆形进度条组件
102 0
|
4月前
|
前端开发 JavaScript
|
4月前
|
监控 数据可视化 前端开发
【前端】政务服务大数据可视化监控平台(源码+html+css+js)
【前端】政务服务大数据可视化监控平台(源码+html+css+js)
|
3月前
|
开发者 容器
flex 布局属性在实际项目中的应用场景有哪些?
flex 布局属性在实际项目中的应用场景有哪些?