笔试题目 -- css3弹性盒子flex实现三栏布局

阳光穿透心脏的1/2处 2022-05-19 08:49 297阅读 0赞

刚开始学习前端的时候，没有注意到这里，3-4月份找实习的时候也见过这个题目，在网上找到答案就敲上去了，没留意。  
但是前提做CVTE笔试题目时，又发现的这道题目，决定好好看一下，记下来：

## 题目： 请用flex实现三栏布局，高度已知，左右栏宽度300px，中间自适应。 ##

弹性盒子本身就是并排的，我们设置宽度即可。  
用一个容器container包裹三栏，设置comtainer容器的display属性为flex，左右栏设置宽度为300px，中间栏设置**flex:1**，这里的1表示宽度比例，具体数值取决于其它盒子的flex值，由于这里其它盒子宽度固定，所以中间栏会自动填充。代码如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>三栏布局</title>
    </head>
    <style type="text/css"> *{ margin: 0; padding: 0; } .container{ display: flex; /*只设置这一属性就OK*/ } .left{ background-color: aqua; width: 300px; height: 100px; } .center{ height: 100px; flex: 1; background: #f296ff; } .right{ height: 100px; background-color: #6ee28d; width: 300px; } </style>
    <body>
    
    <div class="container">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </div>
    </body>
    
    </html>

效果如图：  
![这里写图片描述][70]

[70]: /images/20220519/cae2692f18f14187991a2eb7c54aba5d.png

发表评论取消回复

表情：

评论列表（有 0 条评论，297人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS3 Flex Box 弹性盒子、弹性布局

目录 1. 概要 2. justify-content 属性 3. align-items 属性 4. flex-wrap 属性 5. alig

本是古典何须时尚/ 2022年10月27日 00:27/ 0 赞/ 140 阅读

相关 flex弹性盒子布局（详细）

弹性盒模型 1、伸缩容器display Flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为

你的名字/ 2022年09月14日 02:41/ 0 赞/ 187 阅读

相关 weChat布局-弹性盒子布局-flex

在父元素设置 display:flex; s三个设置协助: [flex-direction][] 规定灵活项目的方向 flex-direction

Dear 丶/ 2022年05月24日 02:52/ 0 赞/ 221 阅读

相关 Flex 弹性盒子布局

CSS3 弹性盒子(Flexible Box 或 Flexbox)，是一种用于在页面上布置元素的布局模式，使得当页面布局必须适应不同的屏幕尺寸和不同的显示设备时，元素可预测地运

蔚落/ 2022年05月23日 03:29/ 0 赞/ 272 阅读

相关笔试题目 -- css3弹性盒子flex实现三栏布局

刚开始学习前端的时候，没有注意到这里，3-4月份找实习的时候也见过这个题目，在网上找到答案就敲上去了，没留意。但是前提做CVTE笔试题目时，又发现的这道题目，决定好好看一

阳光穿透心脏的1/2处/ 2022年05月19日 08:49/ 0 赞/ 298 阅读

相关 css3弹性盒子display：flex

css3的flexbox详细介绍：[https://css-tricks.com/snippets/css/a-guide-to-flexbox/][https_css-tri

﹏ヽ暗。殇╰゛Y/ 2022年05月09日 05:40/ 0 赞/ 253 阅读

相关 CSS3弹性盒子flex布局方式

一、CSS3弹性盒子 CSS3 弹性盒子：是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的：提供一种更加有效

雨点打透心脏的1/2处/ 2022年01月23日 05:49/ 0 赞/ 326 阅读

相关 CSS3总结五：弹性盒子(flex)、弹性盒子布局

弹性盒子容器的属性与应用 display:flex/inline-flex flex-direction flex-wrap justify-

我会带着你远行/ 2021年12月12日 03:03/ 0 赞/ 720 阅读

相关 css3弹性盒子display：flex

先看上面的代码，解释一下意思，看你能认识多少（后面有注释）： 1 .container { 2 display: flex; //弹性布局 3 f

拼搏现实的明天。/ 2021年12月03日 10:43/ 0 赞/ 348 阅读

相关 CSS（三）flex布局（flex弹性布局详解）

这是一个系列的文章，你也可以查看其他文章： 0、[CSS-预热篇][CSS-] 1、[CSS（一）详解position][CSS_position] 2、[CSS（二）t

ゝ一世哀愁。/ 2021年11月01日 04:31/ 0 赞/ 610 阅读