1.定义和用法 flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。 flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。...> 我是一个更多字而且第三个div .container{ display: flex; } .div{ border...flex: 1; === flex: 1 1 0; 这是完整写法, 详见mdn, 它还有另外两种完整写法, 分别是 initial (0 1 auto) 和 none (0 0 auto) 第一个参数表示...: flex-grow 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大 第二个参数表示: flex-shrink 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小 第三个参数表示...: flex-basis给上面两个属性分配多余空间之前, 计算项目是否有多余空间, 默认值为 auto, 即项目本身的大小；设置为auto的时候，会根据盒子内容的多少自动撑开盒子，它里面的每个盒子的宽度是不一样的
比如，为什么我们的子元素会横向的进行分割空间，而不是竖向的，这里就用到了一个属性的默认值： flex-direction flex-direction用于定义flex布局中的主轴方向。...（改变flex-direction的值会影响到一些相关的属性，会在下边说到） flex-direction共有四个有效值可选： row 默认值，从左到右 row-reverse 从右到左 column...如果其中一个元素设置了flex-grow: 2，而其他的设置为1(默认不设置的话，不会去填充剩余宽度) 则会出现这么一个情况，第一个元素占用50px，而其他两个元素各占用25px。 ?...: 2，则最终得到的结果，第一个元素宽度为30px，其余两个元素的宽度为35px。...第三个会选择设置为auto，也就是获取元素的width。
我想要实现的效果是，三个元素，第一个是标题，第二个是消息列表是自适应高度的，第三个是输入框 标题 消息列表 输入框区域</...同时设置了高度为 100vh（必须设置高度） "flex: 1" 是 CSS Flexbox 布局中的一个属性。它用于设置 flex-grow 属性。...flex-grow 属性定义了项目的放大比例，默认值为 0。当所有项目的 flex-grow 值之和为正数时，剩余空间将平均分配给这些项目。...例如上面这段代码中, .chatBox 元素设置了 flex-grow 为 1,意味着它会占用剩余空间的1份。 这样做的好处是可以让子元素自动填充剩余空间,而不需要设置具体的高度值。
总结浮动常见的规则内容 元素一旦浮动后, 脱离标准流 朝着向左或向右方向移动，直到自己的边界紧贴着包含块（一般是父元素）或者其他浮动元素的边界为止 定位元素会层叠在浮动元素上面 如果元素是向左（右）...; 在PC端也几乎已经完全普及和使用, 只有非常少数的网站依然在用浮动来布局; 为什么需要flex布局呢?...双值语法: 第一个值必须为一个无单位数，并且它会被当作 的值。 第二个值必须为以下之一: ✓ 一个无单位数:它会被当作的值。...✓ 一个有效的宽度值: 它会被当作 的值。 三值语法: 第一个值必须为一个无单位数，并且它会被当作 的值。...第二个值必须为一个无单位数，并且它会被当作 的值。 第三个值必须为一个有效的宽度值， 并且它会被当作的值。
双值语法： 第一个值必须为一个无单位数，并且它会被当作 的值。第二个值必须为以下之一： 一个无单位数：它会被当作 的值。...一个有效的宽度值: 它会被当作 的值。 三值语法: 第一个值必须为一个无单位数，并且它会被当作 的值。...取值 initial 元素会根据自身宽高设置尺寸。它会缩短自身以适应 flex 容器，但不会伸长并吸收 flex 容器中的额外自由空间来适应 flex 容器 。...auto 元素会根据自身的宽度与高度来确定尺寸，但是会伸长并吸收 flex 容器中额外的自由空间，也会缩短自身来适应 flex 容器。...cross-start 会根据 flex-direction 的值 相当于 start 或 before。 wrap flex 元素 被打断到多个行中。
当第一行的宽度不足以容纳 300px 时，项目不再溢出容器外，而是会换行 [3]。每一行都应该被视为是一个独立的弹性容器，任何一个容器内的空间分布均不会影响与之相邻的其他容器 [2]。 ?...但是为什么弹性项目会占据整个屏幕的高度呢？在第一部分，容器高度被设置为 100vh，因此可用空间被这四行平分以适应 300px 的项目。...通过给第三个项目设置 flex-grow: 2 ，它获得的可用正向自由空间是其他项目的两倍，即比起其他项目的 173px ，它的总宽度为 286px [7]。...如果没有足够的空间，由于 flex-shrink 默认为 1，所有的项目会均匀地收缩。如果有剩余的空间，由于 flex-grow 默认为 0，剩余空间会放置在最后一个项目的后面。 ?...下面的 gif 中，项目 1 设置为 flex-shrink: 10，项目 4 设置为 flex-grow: 10。
所以要能够正确的使用该属性来控制 items 在主轴方向的对齐方式，那么就需要注意 item 中会影响布局空白的属性，如 flex-grow，flex-basis 这些的使用。...flex-grow 语法格式： flex-grow: 用于设置 item 在主轴方向上的拉伸因子，即如果 flex 容器还有剩余空间，会按照各 item 设置的拉伸因子比例关系分配。...auto：元素会根据自身的宽度与高度来确定尺寸，但是会自行伸长以吸收flex容器中额外的自由空间，也会缩短至自身最小尺寸以适应容器。...双值语法: 第一个值必须为一个无单位数，并且它会被当作的值。第二个值必须为以下之一： 一个无单位数：它会被当作的值。...一个有效的宽度值: 它会被当作的值。 三值语法: 第一个值必须为一个无单位数，并且它会被当作的值。
flex wrap还有一个值：wrap-reverse，设置该值后，被wrap的元素会排到其他元素上面： ? 由此可见，flex wrap一定程度上可以取代media query了。 5....Flex Grow 在上面所有的例子中，三个flex item只占据了flex container小部分空间，如果想让flex item占满flex container我们需要给flex item设置flex-grow...实际上压缩率和flex item的初始尺寸也有关系，只不过当初始尺寸一样时它带来的影响被忽略了。...Flex Basis flex-basis用于设置flex item的初始宽/高。为什么有width和height还需要重新加一个flex-basis呢？...; padding: 40px 0; text-align: center; background: #ccc; } 默认排列顺序是按照flex item在html中的出现顺序： ?
你有没有想过 CSS 中的 flex属性如何工作？ 它是 flex-grow，flex-shrink和flex-basis的简写。...flex-grow: 1; } 注意：flex-grow会影响宽度或高度，具体取决于flex-direction属性。...项目宽度 = (( flex-grow / flex-grow 总个数) * 可用空间）+ 初始项目宽度 多个 flex-grow 值 在前面的示例中，所有flex项目的flex-grow值都相同。....card { display: flex; flex-direction: column; } /* 第一个解决方案 */ .card__title { flex-grow:...在本节中，我们会探讨一些可以将其合并的想法。 footer ?
子元素在主轴方向上排列时，如果超出了容器的宽度，会忽略自身的宽度，自适应容器宽度的变化。上面代码中子元素宽度被设定为 150px，但是实际展示的是 50px 2....该属性会覆盖项目原始大小（width/height） 4....第一个值：整数 flex-grow 第二个值：整数 flex-shrink 第三个值：有效宽度 flex-basis 举例 案例 描述 flex: 0 1 auto; 不放大，可收缩，初始宽度【默认值...】 flex: 1 1 auto; 项目自动放大或收缩适应容器 flex: 0 0 100px; 按计算大小填充到容器中 双值语法: 属性值 描述 第一个值：整数 flex-grow 第二个值：有效宽度...flex-basis 举例 案例 描述 flex: 0 100px; 禁止放大，按计算大小填充到容器中 单值语法: 属性值 描述 整数 flex-grow 有效宽度 flex-basis 关键字
专注前端与算法的系列干货分享，转载请声明原创： 「微信公众号：心谭博客」| xxoo521.com | GitHub 前端工程师的福音：flex 原来写前端的过程中，得有一大部分的时间是花费在了水平...，第一个标签由于设置了flex-grow: 1，它自动占据了父容器除了剩下两个标签外的所有空间！...常见应用场景 场景 ①：水平垂直居中 以上面的html结构为例，如果要让 中的元素水平垂直居中，只需要以下样式代码： div { display: flex; justify-content...： 不再局限于 12 列 不再需要计算宽度，也不需考虑宽度浮点数带来的误差 必看：flex 的坑 在实现水平垂直居中的过程中，发现了flex布局仅仅影响容器的一级子元素。...因为水平垂直居中仅仅影响到了level2，而不会进一步向下”污染“更深级别的子元素的布局样式。
，做一个汇总，会不定期地更新。。...添加或删除disabled attribute会禁用或启用这个按钮。但 attribute 的值无关紧要，这就是我们为什么没法通过 仍被禁用这种写法来启用按钮。...和inline-block中的任何一个； position的值不为relative和static； //BFC的表现规则，内部元素的样式不会影响外部元素的样式（可用于解决高度塌陷） flex子项比例..."> // 本例中，box1为box2的2倍 flex中 子项设置了宽度后，优先以2个item宽度的比例去显示。...未设置宽度情况下，以 flex-grow的比例为准。
relative 相对定位，对象遵循常规流，并且参照自身在常规流中的位置通过top，right，bottom，left这4个定位偏移属性进行偏移时不会影响常规流中的任何元素。...盒子的偏移位置不影响常规流中的任何元素，其margin不与其他任何margin折叠。...（1）flex-grow：定义项目的的放大比例 默认为0，即使存在剩余空间，也不会放大； 所有项目的flex-grow为1：等分剩余空间（自动放大占位）； flex-grow为n的项目，占据的空间（放大的比例...）是flex-grow为1的n倍。...优点 只会影响它这个元素后面的元素 内容默认提升半层 默认宽由其中的内容决定，会换行排列 这样做的优点就是在图文混排的时候可以==很好的使文字环绕在图片周围==。
1.1浮动布局 浮动布局的属性为 float，其值可以是 float 或 right，设置浮动布局后将会影响左右相邻元素，并且会脱离文档流但却受文档流影响。...，浮动为左浮动；接着查看 body 中的 html 内容，首先是一个常规的 div，接着是两个使用了 float 样式的 div，其中一个背景色为绿色，使用 margin-top 表示距离顶部的距离为...10px（此处用于查看接下来的一个知识点），结果如下： 此时我们可以看到，其 div 没有改变其元素类型但依旧会显示于一行，这是因为此时设置了浮动，该浮动的 div 将会影响其左右相邻 div...若此时将浮动更改与右边那么使其元素浮动于右侧： 结果如下： 浮动会使div 脱离文档流，在之后若再加上div，将会收到之前浮动的影响使其重叠： 结果如下，黑色的div 在浮动的酒红色...flex-grow flex-grow 属性可以使其伸缩项（子元素）按照其空间内剩余内容进行扩充，例如如下代码： 该代码我设置了其伸缩项每个宽度为 100px，那么肯定不会填充满该行，当在某一项中设置了
我们大概都知道的是：HTML渲染过程中有一个可能执行的、影响页面性能的“回流”和“重绘”的过程。...flex简写时包括三个属性：flex-grow、flex-shrink和flex-basis —— flex-grow：指定了容器剩余空间多余时候的分配规则，默认值是0，多余空间不分配； flex-shrink...（这时候实际上展示的是space占位元素，但是此元素啥样式也没有，故而显示出来的就是下面的同宽度的“第二页面”z_two_page） ★这里需要注意的是：为什么“哈哈哈”所属div在前而“页面”所属div...，第三个元素则写了展示时的“默认大小”：如你所看，box承载的是页面，所以它是100vw，而class为“z_two_page”的元素这里设置了12rem ，你完全可以将这个值换掉！...，比如：右侧留白问题、原生手势对页面整体的影响等，我们一般会在css中设置 html{max-width: 100vw;overflow-x: hidden;} 。
这个是 CSS 史上第一个以 start-end 来定义方向的属性，这是一个可伸缩的布局模型。...双值语法: 第一个值必须为一个无单位数，并且它会被当作 的值。第二个值必须为以下之一： 一个无单位数：它会被当作 的值。...一个有效的宽度值: 它会被当作 的值。 三值语法: 第一个值必须为一个无单位数，并且它会被当作 的值。...第二个值必须为一个无单位数，并且它会被当作 的值。 第三个值必须为一个有效的宽度值， 并且它会被当作 的值。...，相信以后的布局会简单得多。
啰嗦那么多，正式开始 一、Flex 是什么，为什么要用？ 就 W3C 官方给到的解释是，这是设计来实现更复杂的版面布局。...为什么能用？他实现所用到的逻辑是什么？ 当然了，这仨问题也直接贯穿在功能实现当中，所以还是来了解使用的方式。...第一个伸缩项目一行中的最开始位置，最后一个伸缩项目在一行中最终点位置，项目之间的间隔都相等。 space-around：伸缩项目会平均地分布在行里，每个项目两侧的间隔相等。...如果项目未设置高度或设为auto，将占满整个容器的高度 stretch的使用受到高度的影响，所以可先把item1-3-5取消高度的设置 .item1 { width: 10%;...建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
flex-basis对缩放的影响见下例： <span style="width: 10px; flex-basis...<em>flex-grow</em>值确定各项将额外获得空间<em>的</em>比例： 拉伸比例 = 当前项<em>的</em><em>flex-grow</em> / 当前行所有项<em>的</em><em>flex-grow</em>之和 例如3列等比布局： <<em>div</em> style="display: flex...，flex-grow和flex-shrink的初始值似乎会变来变去的，还与默认值不相同，这是出于方便常见场景考虑： Note: The initial values of flex-grow and flex-basis...实际上，真正难以驾驭的恰恰是那些之前很容易实现的场景 P.S.为什么非得用felxbox布局？结合使用，各取所长不好吗？...> 关键点在于文本flex-shrink缩回来，这样在文本溢出时能够收缩回来，给icon留出足够的空间，未溢出时，收缩不影响文本宽度，右侧icon就能够紧贴着 另外，第二行容器的max-width
这时候，flex-grow 就是用来决定这些留白的。 多出来的留白（或剩余宽度）会按照 flex-grow （增长因子）的值分配给每个弹性子元素，flex-grow 的值为非负整数。...# flex-shrink flex-shrink 属性与 flex-grow 遵循相似的原则。计算出弹性子元素的初始主尺寸后，它们的累加值可能会超出弹性容器的可用宽度。...="item">flex:none 第一个元素固定 300px ，第二个填满剩下的 <div class...弹性容器会占据 100% 的可用宽度，而高度则由自身的内容来决定。即使改变主轴方向，也不会影响这一本质。 弹性容器的高度由弹性子元素决定，它们会正好填满容器。...如果开启了 flex-wrap 则会忽略该属性 flex-basis 指定元素未受 flex-grow 和 flex-shrink 影响时的大小 flex flex: <flex-shrink
son2则在父元素的右侧显示，紧贴父元素上*/ c) 如果有未浮动的兄弟元素，那么元素在浮动之后，会根据它在标准流中的位置确定该在第几行展示。...那么要怎样才能消除浮动对其他元素的影响呢？我们通过下面的方式清除浮动带来的影响。 a) 为父元素设置固定的高度（解决问题一）。...在相对定位中，实际上元素并未脱离标准流，所以浏览器还是会区分它是否是块级或其他类型的元素。另外，设置元素的margin属性，实际上margin区域会出现在元素定位之前的位置。...属性值都是0，并且定位流中的元素会覆盖标准流中的元素，同在定位流中的元素，写在后面的会覆盖写在前面的元素。...如果只有一个宽度值（有单位的），则代表flex-basis；如果值有两个值，那么第一个必须是数字，代表flex-grow，第二个可以是数字或宽度，分表代表flex-shrink或flex-basis。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
