Code前端首页关于Code前端联系我们

灵活弹性三栏布局:左右栏宽固定,中心宽度自适应,

terry 2年前 (2023-09-27) 阅读数 62 #数据结构与算法

代码示例,实现了三列布局,左右列宽固定,中心宽度自适应。

示例代码:[HTML] 纯文本显示 复制代码 ❀ html > body{ .左{宽度:300px❀;00px;背景:#B4D3F7; }.center{ flex-grow:1; 背景:#F7E8B4;.right{ 宽度:300px; 高度:400p x;背景:#B4D3F7;

123
123
123 > div =“左”
12345
12345 >    =》右”“>>>

上面的代码实现了我们的需求。这里简单介绍一下

1。实现过程: [CSS] 纯文本显示 复制代码

123.box
12345.box

显示 :灵活;要实现弹性布局, view 必须应用于特定的父元素:flex。 [CSS] 纯文本显示复制代码

12345.左❀宽度 :300px 高度400px; : #B4D3F7;}

左栏尺寸固定,右栏尺寸固定。 [CSS] 纯文本显示复制代码

1234.中❀flex-g行:1;:# F7E8B4;}

实现尺寸适配的关键是flex-g属性的应用。

版权声明

本文仅代表作者观点,不代表Code前端网立场。
本文系作者Code前端网发表,如需转载,请注明页面地址。

热门