8、前端布局与组件全解析

前端布局与常用组件详解

最新推荐文章于 2025-11-25 08:09:50 发布

vim8coder

最新推荐文章于 2025-11-25 08:09:50 发布

阅读量3

点赞数

CC 4.0 BY-SA版权

分类专栏： Sencha Touch实战指南文章标签：前端布局 flex width

本文链接：https://blog.youkuaiyun.com/vim8coder/article/details/155288714

Sencha Touch实战指南专栏收录该内容

20 篇文章 ¥499.90

订阅专栏¥69.90

会员秒杀 ¥9.9 重磅福利

超级会员免费看

前端布局与组件全解析

1. 布局调整与探索

在前端开发中，布局的调整是构建界面的重要环节。你可以尝试调整 flex 和 width 值，观察其对子容器大小的影响。同时，改变 align 的配置选项（如 center 、 end 、 start 和 stretch ），能看到不同的布局效果。

2. 不同布局类型介绍

2.1 vbox 布局

在之前的 var hboxTest = new Ext.Container({ 代码上方，添加以下代码：

var vboxTest =  new Ext.Container({
    layout: {
        type: 'vbox',
        align: 'stretch'
    },
    items: [{
        xtype: 'container',
        flex: 1,
        html: 'My flex is 1',
        margin: 5,
        style: 'background-color: #7FADCF'
    }, {
        xtype: 'container',
        flex: 2,
        html: 'My flex is 2',
        mar