DIY可视化必看教程 FLEX组件使用,教大家如何布局界面

DIY可视化必看教程FLEX组件使用

水平布局实现、两端对齐

DIY可视化必看教程 FLEX组件使用,教大家如何布局界面_第1张图片

1、拖个FLEX组件过来,排列方向改为水平。

DIY可视化必看教程 FLEX组件使用,教大家如何布局界面_第2张图片

2、拖个文件内容组件进去、栅格化到0

DIY可视化必看教程 FLEX组件使用,教大家如何布局界面_第3张图片

3、复制多一个文本内容组件

DIY可视化必看教程 FLEX组件使用,教大家如何布局界面_第4张图片

4、修改FLEX组件显示对齐方式

DIY可视化必看教程 FLEX组件使用,教大家如何布局界面_第5张图片

5、图标对齐

DIY可视化必看教程 FLEX组件使用,教大家如何布局界面_第6张图片

6、修改FLEX组件对齐方式

DIY可视化必看教程 FLEX组件使用,教大家如何布局界面_第7张图片

DIY可视化必看教程 FLEX组件使用,教大家如何布局界面_第8张图片

7、修改中间占位大,其他占位小

DIY可视化必看教程 FLEX组件使用,教大家如何布局界面_第9张图片

8、样式设置、更多样式设置靠自己发现

DIY可视化必看教程 FLEX组件使用,教大家如何布局界面_第10张图片

9、比较重要的一个属性设置、外边距负值

DIY可视化必看教程 FLEX组件使用,教大家如何布局界面_第11张图片

DIY可视化必看教程 FLEX组件使用,教大家如何布局界面_第12张图片

10、组件强制大小及绝对定位使用

DIY可视化必看教程 FLEX组件使用,教大家如何布局界面_第13张图片

DIY可视化必看教程 FLEX组件使用,教大家如何布局界面_第14张图片

11、参照组件模板来实现

DIY可视化必看教程 FLEX组件使用,教大家如何布局界面_第15张图片

补充教程
文本内容过长,显示...实现

DIY可视化必看教程 FLEX组件使用,教大家如何布局界面_第16张图片

DIY可视化必看教程 FLEX组件使用,教大家如何布局界面_第17张图片

你可能感兴趣的:(前端,css,html)