Flex项目宽度不能减小，伸展到100% - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

CSS Flexbox 可视化手册

如果这些项目的高度不一致，它们将会伸展到最高的那个高度 flex-basis默认为 auto（项目宽度将由其内容决定） flex-wrap默认为nowrap（如果容器的宽度不足以适合这些项目，它们不会换行...在默认情况下，flex-wrap被设置为 nowrap，这意味着如果容器不能适应在其内的行中原始宽度的项目，则这些项目将会缩小来进行适应。如果它们因为某种原因无法收缩，则会溢出容器。...但是为什么弹性项目会占据整个屏幕高度呢？在第一部分中，容器高度设置为 100vh，因此可用空间被平均分为四行，来适合 300px项目的需要。...如果我们没有设置 100vh，容器的高度则会遵循项目内容的高度，如下图所示： ? 没有设置容器高度另一个选项是wrap-reverse，它会反转交叉轴。...它的默认值是 stretch其它的选项是 flex-start、flex-end、 center和 baseline。 stretch选项使所有项目伸展到容器高度（如果设置）或最高项目的高度。

3.1K2 0

flex-grow、flex-shrink、flex-basis详解

flex-shrink的默认值为1，当父元素的宽度小于所有子元素的宽度的和时，子元素的宽度会减小。值越大，减小的越厉害。如果值为0，表示不减小。...则A，B总共超出父元素的宽度为(200+300)- 400 = 100px。如果A，B都不减小宽度，即都设置flex-shrink为0，则会有100px的宽度超出父元素。...如果A不减小宽度:设置flex-shrink为0，B减小。...则最终B的大小为自身宽度(300px)- 总共超出父元素的宽度(100px)= 200px 如果A，B都减小宽度，A设置flex-shirk为3，B设置flex-shirk为2。...则最终A的大小为自身宽度(200px)- A减小的宽度(100px * (200px * 3/(200 * 3 + 300 * 2))) = 150px,最终B的大小为自身宽度(300px)- B减小的宽度

1.5K4 0

您找到你想要的搜索结果了吗？

是的

没有找到

深入理解和应用display属性（二）

项目的重要属性： 1) Align-self：项目自身的对齐方式，可以覆盖容器的align-items属性的值 2) Flex：他是flow-grow\flow-shrink\flex-basis简写，...：所有子元素之和小于容器宽度时，如果处理剩余宽度，flex-grow默认为0，如果设置为正数，则表示索取剩余宽度值，公式如下：子元素自身宽度 + 剩余宽度*(子元素自身glex-frow)/(所有子元素的...属性，所以为固定值 4) Flex-shrink：所有子元素之和大于容器宽度时，如果处理超出宽度，flex-shrink默认为1，值越大减小的越厉害，值为0，表示不减少,公式如下：子元素自身宽度 –...超出宽度 * ( 子元素自身宽度 * 子元素自身的flex-shrink/ ( 所有子元素宽度 * 子元素的flex-shrink之和) ) .wrap{ width:...* 200 / 500 = 160 Grid2计算：100 – 100 * 100 /500 = 80 注意事项： 1) Flex-grow和flex-shrink不好和flex直接混合应用，此两个值是在固定宽度的情况下进行均分的算法

9366 0

CSS弹性布局（Flex）详解

就是针对浮动布局的所有痛点而生, 元素浮动的后遗症全部解决所以在Flex容器中, 不能,也没必要更使用float属性,没了浮动当然也不再需要clear Flex有自己的元素垂直对齐解决方案, 所以vertical-align..., 即文本的下边线 5 stretch 默认值自动伸展到容器的高度(项目未设置高度或将高度设置为auto有效) ---- 6. align-content align-items和align-content...多个项目在交叉轴上的对齐方式: 自动伸展到容器高度*/ align-items: stretch; /*6....(N: 项目数量) flex-grow: 2如果某个项目为2, 其它项目为1, 则它占据空间比其它项目多一倍 flex从剩余空间中分配项目所占的份数前提是项目不要设置固定宽度, 由盒子在剩余空间中自动分配...每个盒子所在比例可以各不相同, 属性值必须是数值,整数小数都可以如果盒子中存在有宽度的项目, 那么剩余空间应该减去它们 3. flex-shrink 设置了项目的缩小比例,默认为1, 即空间不足时,

1.3K3 1

「译」Flexbox 基本原理

flex-wrap 的默认值为 nowrap，这意味着如果容器不能在保留项目原始宽度的同时将它们排列成一行的话，项目将会收缩以进行适应。如果由于某些原因无法收缩，则项目会溢出容器外 [1][3]。...但是为什么弹性项目会占据整个屏幕的高度呢？在第一部分，容器高度被设置为 100vh，因此可用空间被这四行平分以适应 300px 的项目。...假如我们没有设置 100vh，则容器高度将等于项目内容的高度，如下图所示 [1]： ? 另一个选项是 wrap-reverse，它将会反转交叉轴。...如果设置了容器高度，则 stretch 属性值会使所有的项目伸展至与容器等高；如果没有设置，则所有项目与最高的项目等高 [5]。上面第一张图片中容器高度设置为 100vh，第二张图片则没有设置高度。...对于负向自由空间，项目 1 减小的宽度是其它项目减小宽度的 10 倍；对于正向自由空间，项目 4 增加的宽度是其它项目增加宽度的 10 倍。 ? flex-basis 还可以接受值 content。

2K3 0

分享 10 个常用且必须要掌握的 CSS 知识点

简单来说，这意味着边距、边框和填充将添加到使用 width 和 height 属性指定的总高度和宽度中。此外，添加边距、内边距和边框不会减小内容区域的总大小。...设置时会减小内容区域的大小。或者换句话说，当向元素添加边距、内边距和边框时，元素的总高度和总宽度不会增加。 CSS盒子模型的组成部分： 1、内容：这是 CSS 盒子模型的主要元素。...a) flex-start flex-start 对齐容器顶部的项目。 b) flex-end flex-end 对齐容器底部的项目。 c) center 居中对齐容器中间的项目。...grid-template-columns: 20px 100px 200px 100px; 2）grid-template-rows： grid-template-rows 属性的工作方式与 grid-template-columns....div { width: calc(100% - 100px) } 上述 div 的大小将等于 div 的父级的计算宽度减去 100px。其他需要查看的重要 CSS 属性。

6.9K1 0

CSS布局相关及Flex详解

盒布局可以解决float导致底部不对齐的问题；同时可以很好的规避多栏布局宽度必须相等的问题以及解决多栏布局不能指定什么栏中显示什么内容的窘境。...b c 其中，container为flex布局，宽度1000px；a、b、c宽度都为100px；此时设置flex-grow属性如下...flex-shrink：定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小 flex-shrink同flex-grow属性，当子元素宽度（或高度）大于父容器元素的宽度（或高度）时，将溢出的宽度...需要注意的是，缩放不能缩小为0。...计算获得a和c的宽度为：600，b的宽度为：-200。实际宽度如下图： ? 注意：如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。

1.4K5 1

深入理解Flex布局 -- flex-grow & flex-shrink & flex-basis

但加上后容器的宽度就被撑开了，页面底部出现了滚动条：而我期望的效果是滚动条出现在中间部分，整个页面不能滚动。...flex-grow（默认值 0）假设有一个宽度为 800 的容器，里面有 3 个项目，宽度分别是 100，200，300： flex-grow为 2，1，1，各个项目的计算逻辑如下：首先将多余空间 200 除以 4（2 + 1 + 1），等于 50 left = 100 + 2 x 50 =...个项目，宽度分别是 100，200，300，这时候空间就不够用溢出了。...首先要理解清楚，当我们定义一个固定宽度容器为flex的时候，flex会尽其所能不去改变容器的宽度，而是压缩项目的宽度。

2.1K2 0

css3 flex弹性布局详解

flex:是子项目在主轴的缩放比例，不指定flex属性，则不参与伸缩分配。...当所有子项目的总宽度大于父元素的宽度的时候，子项目会均分父元素的宽度。...子项在侧轴先分布在两头、再平分剩余空间 \*/ /\* align-content: space-between; \*/ /\* 设置子项元素高度平分子元素高度，同样的，子项不能设置高度...display: flex 属性后，父元素不设置宽度，宽度就是100%；不会被子元素宽度撑开；使用了display: inline-flex 属性后，父元素不设置宽度，...宽度就是所有的子元素宽度之和，会被子元素宽度撑开，实现宽度自适应； \*/ display: inline-flex; } .box11

1901 0

深入了解 Flex 属性

项目宽度 = (( flex-grow / flex-grow 总个数) * 可用空间）+ 初始项目宽度多个 flex-grow 值在前面的示例中，所有flex项目的flex-grow值都相同。...这在边界情况下非常有用，我们希望使 flex 项目保持其初始宽度。 flex-grow 不能让 flex 项目相等有一个常见的误解，使用flex-grow会使项目的宽度相等。....item-2 { width: 300px; flex-shrink: 1; } 在下列条件下，浏览器会保持项目宽度为300px: 所有项目宽度的总和小于包装器宽度视窗宽度等于或小于项目...这里需要将flex-grow重置为0，以防止项目宽度超过50%。如果将 flex-basis 设置为 100%，会怎么样？该项目单独占一行，其他项目将换行。 ?....item { flex: 100px; /* flex: 1 1 100px */ } 使用无单位0 有时，你想把 felx-basis 设置为 0，你可能会这样写： .item {

1.6K3 0

玩转 CSS Flexbox 弹性布局

inline-flex; 创建 flex 行内容器 .container { background-color: #abcdef; width: 100px; height: 100px...span 上行内元素，不能设置宽高，因为被设置为了 flex 容器，所以上面代码中 span 元素也能被设置宽高 2....，项目宽度超出容器宽度时自动换行 flex-flow 属性值站长源码网 flex-flow: 主轴方向多行容器(是否换行); 属性值描述 flex-flow: row nowrap; 主轴为水平方向且不换行...】 flex: 1 1 auto; 项目自动放大或收缩适应容器 flex: 0 0 100px; 按计算大小填充到容器中双值语法: 属性值描述第一个值：整数 flex-grow 第二个值：有效宽度...flex-basis 举例案例描述 flex: 0 100px; 禁止放大，按计算大小填充到容器中单值语法: 属性值描述整数 flex-grow 有效宽度 flex-basis 关键字

9511 0

CSS_Flex 那些鲜为人知的内幕

此外，width可以将项目减小到其最小尺寸以下，而flex-basis则不能。 ❞ flex-grow 默认情况下，Flex 上下文中的元素将缩小到它们在主轴上的「最小舒适尺寸」。...容器至少需要 500px 宽度，以便将这些子元素以其假设大小容纳其中。假设我们将容器缩小到 400px。嗯，我们不能把 500px 的内容塞进一个 400px 的袋子里！我们有 100px 的亏空。...为了使它们适应，我们的元素将需要放弃总共 100px。 flex-shrink属性让我们决定如何处理这个亏空。与flex-grow类似，它是一个比例。...现在，假设我们将第一个子元素提高到flex-shrink: 3：我们总的亏空是 100px。...包裹到目前为止，我们的所有项目都是并排或纵列的。flex-wrap属性允许我们改变这一点。如果容器宽度不能包含子元素的话，子元素会被隐藏。

2971 0

【前端基础篇】CSS基础速通万字介绍（下篇）

特点: 独占一行高度, 宽度, 内外边距, 行高都可以控制. 宽度默认是父级元素宽度的 100% (和父元素一样宽) 是一个容器(盒子), 里面可以放行内和块级元素....默认宽度就是本身的内容行内元素只能容纳文本和其他行内元素, 不能放块级元素 .demo2 span { width: 200px; height...Flex 容器和项目要使用 Flexbox 布局，首先要定义一个Flex 容器。在 Flex 容器中，所有直接子元素都会自动成为 Flex 项目。....container { flex-wrap: wrap; } 项目属性这些属性用于控制 Flex 项目如何在容器内分布： flex：综合属性，定义项目的增长、缩小和基础尺寸。...flex: 1; 表示项目将平分剩余空间。 .item { flex: 1; } align-self：允许单个项目独立对齐，而不影响其他项目。

661 0

CSS3的flex布局

flex的一些属性 CSS3中引入了另一种框--flexbox，flexbox有一些block和inline不同的性质，比如：自适应子元素（flex item，又称伸缩项目）的宽度伸缩项目的float...，clear，vertical-align属性失效不能继承flex框，但可以依次设置可以修改flex流的方向以及布置规则现在就大体讲述下这个具体属性的表示含义。...flex-direction设置main-axis（主轴）的方向，可选参数为row，row-reverse，column,column-reverse，顾名思义，当方向为row时，伸缩项目横向排列，若此时所有伸缩项目的宽度已经超出了伸缩容器的宽度...主轴长度、主轴长度属性：伸缩项目的在主轴方向的宽度或高度就是项目的主轴长度，伸缩项目的主轴长度属性是width或height属性，由哪一个对着主轴方向决定。...侧轴长度、侧轴长度属性：伸缩项目的在侧轴方向的宽度或高度就是项目的侧轴长度，伸缩项目的侧轴长度属性是「width」或「height」属性，由哪一个对着侧轴方向决定。

1.4K6 0

CSS Flex布局

: flex-start | flex-end | center | baseline | stretch; flex-wrap Flex容器中，一般情况下，项目都是单行排列，不会换行。...当所有项目和宽度超过容器宽度时，项目会在宽度上进行压缩，如果想让项目换行，可以使用flex-wrap属性，其有三个取值 nowrap | wrap | wrap-reverse flex:none 我们已经知道了...，当项目超过容器的宽度，默认情况下，项目宽度会被压缩，但我们希望其不被压缩，且不换行时，可以使用项目属性 flex:none 使得项目不能被压缩或者放大：图片 flex:1 如果一行有剩余的情况下...，我们希望项目能够均匀放大，撑满水平方向，就可以给所有项目加上flex:1属性：使用这个方法，我们可以通过： flex-auto"> 100px; flex: none; } .flex-auto .flexible { flex: 1; } 实现一栏固定，一栏自适应的效果 flex-direction 主轴设定

9403 0

css3 Flex布局学习

这里需要强调，不能先入为主认为宽度就是 main size，高度就是 cross size，这个还要取决于你主轴的方向，如果你垂直方向是主轴，那么项目的高度就是 main size。...假设容器高度设置为 100px，而项目都没有设置高度的情况下，则项目的高度也为 100px。 flex-start：交叉轴的起点对齐 ?...假设容器高度设置为 100px，而项目分别为 20px, 40px, 60px, 80px, 100px, 则如上图显示。 flex-end：交叉轴的终点对齐 ?...当 flex-basis 值为 auto 时，则跟根据尺寸的设定值(假如为 100px)，则这 100px 不会纳入剩余空间。...这里可以看出，虽然每个项目都设置了宽度为 50px，但是由于自身容器宽度只有 200px，这时候每个项目会被同比例进行缩小，因为默认值为 1。

1.5K4 0

css布局使用

通过负边距将浮动的侧栏拉上来，左侧栏的负边距为100%，刚好是窗口的宽度，因此会从主面板下面的左边跑到与主面板对齐的左边，右侧栏此时浮动在主面板下面的左边，设置负边距为负的自身宽度刚好浮动到主面板对齐的右边...为了避免侧栏遮挡主面板内容，在外层设置左右padding值为左右侧栏的宽度，给侧栏腾出空间，此时主面板的宽度减小。...设置main宽度为100%，设置两侧栏的宽度。设置负边距，sub设置负左边距为100%，extra设置负左边距为负的自身宽度。设置main的padding值给左右两个子面板留出空间。...设置main-wrap宽度为100%，设置两个侧栏的宽度。设置负边距，sub设置负左边距为100%，extra设置负左边距为负的自身宽度。设置main的margin值给左右两个子面板留出空间。...圣杯采用的是padding，而双飞翼采用的margin，解决了圣杯布局main的最小宽度不能小于左侧栏的缺点。双飞翼布局不用设置相对布局，以及对应的left和right值。

1.9K9 0

常见的布局实现

三列布局.png [3] 弹性 (Flex) 布局弹性布局：采用 Flex 布局的元素，称为 Flex 容器（flex container），它的所有子元素自动成为容器成员，称为 Flex 项目（flex...用法：display：flex （不能与 float、position 混用）； (父)容器属性：flex-flow （包括 flex-direction、flex-wrap）、justify-content...（水平）、align-items（垂直）、align-content； (子)项目属性：order、flex-grow、flex-shrink、flex-basis、flex、align-self。...; /* 使用弹性布局 */ flex-flow: row wrap; /* flex-direction (规定 Flex 项目按行分布) 和 flex-wrap (Flex 项目自动换行...); /* 生成一个 [0, 100) 大小的整数 */ div.style.order = num; /* Flex 项目按照从小到大的顺序显示 */ div.innerHTML

8306 0

从零开始学 Web 之 CSS3（七）多列布局，伸缩布局

子元素宽度不拉伸*/ } .third{ flex-grow: 2;/*third子元素宽度拉伸，拉伸的宽度占据父元素剩余空间的三分之二*/ } 3.2、flex-shrink 同 flex-grow...flex: [number]：这个语法指定了一个数字，代表了这个伸缩项目该占用的剩余空间比例。...flex: auto：属性值被设为auto的伸缩项目，会根据主轴自动伸缩以占用所有剩余空间 3.4、flex 应用案例需求：不管有多少个 li 标签，总是能平分父盒子（因为从服务器获取的 li 标签的个数可能不是固定的...那么，能不能单独设置某个子元素在侧轴的对齐方式呢？ 5、align-self （子元素使用）单独设置某个子元素在侧轴的对齐方式，属性值和 align-items 相同。...: row; */ } article { height: 100%; background-color: green; flex: 1;

4K1 0

flexbox 布局

: none; width: 100px; height: 100px; background-color: #8cacea; margin: 8px; } image...项目，即使浏览器出现滚动条(当flex项目的总体宽度大于浏览器窗口宽度)。...如果希望flex容器在其flex项目达到一定数量能换行，将flex-wrap设置为wrap即可。当一行再不能包含所有列表项的默认宽度，就会多行排列。除此之外，还有一个值wrap-reverse。...如果像是这样flex项目的宽度多出了flex容器，那么就需要将flex-shrink: 1;，这样会压缩flex项目的宽度，让其平均分配flex容器的空间，数值也是flex的占比。...从上面可以得出结论，绝对flex项目的宽度只基于flex属性，相对flex的宽度基于内容的大小。

9124 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭