通过css 设置 弹性 盒子 内的 多个 元素如何 占满 盒子 的全部空间如果只知道 一个 元素的 宽度 ，其他元素的 宽度 不知道： 如果只知道 一个 元素的 宽度 ，其他元素的 宽度 不知道： .box { border: 1px solid blue; width: 600px; display: flex ; flex -direction: row; padding: 10px 10px; .boxModel { border: 1px solid red; 一. 介绍 弹性 盒子 是 CSS3 的一种新的布局模式。 CSS3 弹性盒（ Flex ible Box 或 flex box），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 引入弹性盒布局模型的目的是提供一种更加有效的方式来对 一个 容器中的子元素进行排列、对齐和分配空白空间。 display: flex | inline- flex ； 弹性 盒子 由弹性容器( Flex container)和弹性子元素( Flex item)组成。 弹性容器通过设 在开发的过程中，经常会遇到这样的需求，就是 并列 的 两个 盒子 ， 一个 有 固定 宽度 ，另 一个 盒子 不指定 宽度 就可以 占满 其余的部分 父 盒子 给添加上 flex 属性，左边 盒子 指定 宽度 ，给右边 盒子 加上 flex :1属性就可以了 <style> .father{ width:100%; display: flex ; /* flex 布局*/ .left{ background: red; width:200px; heigh felx布局中，如何在给子元素增加 固定 宽度 之后，如何让某个子元素 占满 剩余 宽度 ，给这个子元素增加 flex -grow: 1样式即可。 < div style="display: flex "> < div style="min-width: 80px;">稽核意见：</ div > < div style=" flex -grow: 1"> <el-tag :hit="true" type="info" class="custom-tag" width="1 阅读本文约需要9分钟大家好，我是你们的导师，经常看我朋友圈的同学应该知道，我每天会在微信上给大家免费提供以下服务！1、长期为你提供最优质的学习资源！2、给你解决技术问题！3、每天在朋友圈里分享优质的技术文章！4、每周1、3、5送纸质书籍免费送给大家，每年至少送书800本书！5、为大家推荐靠谱的就业单位！请注意！我上面说的5点全部都是免费的！全网你应该找不到第二家吧！当然，大家在我私人微信... 一个 父 盒子 包含 两个 子 盒子 ，父 盒子 已 设置 display: flex ;和宽高 子 盒子 1 设置 宽高，那么子 盒子 设置 flex :1;时会 占满 剩余 空间。 最近不是又要秋招了吗？有的小伙伴就说了，你的面试专栏可是鸽了有一段时间了奥，再不更新我就取关拉！这这这，我这不来更新了吗，三个招聘季节，更新了三篇，合情，合理~再也不画饼了今天带来的是 一个 场景题对于 两个 盒子 ，实现左边 固定 宽度 ，右边 自适应 当然，你可能很快的就用擅长的方法做出来了，那就再看看其他方法吧毕竟当你一口气说出三四个的时候，面试官还是会对你有点好感的。技多不压身嘛~好了，offer收割机们，我们上代码。 三列布局：中间 宽度 固定 ，两侧 宽度 自适应 屏幕的实现。 对于我这个新手，这个问题还真的难住了，在网上查找了一番，觉得这个方法挺好用的。（大部分都是两侧 宽度 固定 ，中间 宽度 自适应 ，后面再来看这种！） CSS部分： body{ margin:0; #main{ width:540px; //给居于中间的d