相关疑难解决方法(0)

我玩过这个漂亮的CSS Flexbox演示页面,我理解了大多数概念,但是我无法flex-shrink在工作中看到.无论我在那里应用什么设置,我都看不到页面上的任何区别.

从规格:

<"柔性成长">

此组件设置"flex-grow",并指定弹性增长系数,该系数决定当分配正空闲空间时,弹性项目相对于弹性容器中其余弹性项目的增长量.省略时,将其设置为"1".

<"柔性缩水">

此组件设置"flex-shrink"手动并指定flex缩减系数,该系数确定当分配负可用空间时,flex项目相对于Flex容器中其余flex项目的收缩程度.省略时,将其设置为"1".在分配负空间时,弹性收缩因子乘以弹性基础.

在什么情况下flex-shrink应用(即负空间分配时)？我已经尝试过在flexbox元素上设置宽度的自定义页面和其中元素的(min-)宽度以产生溢出,但似乎不是描述的情况.

它已经得到了支持吗？

作为一个解决方案,链接演示的一组选项或类似JSFiddle的现场演示将受到高度赞赏.

似乎flex div中的内容会影响其有关flex-grow属性的计算大小.难道我做错了什么？

在下面提供的小提琴中,你会看到一个数字键盘.除底行外,所有行都包含3个数字.那行应该是'0'是2个数字的宽度,因此flex-grow: 2':'(冒号)是1个数字的大小,因此flex-grow: 1.

我在这里错过了什么吗？

'0'的右侧应与其上方的8,5和2对齐.有点过了.

.numbers {
    display: flex;
    flex-direction: column;
}

.row {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    justify-content: space-between;
}

.button {
    display: flex;
    flex-grow: 1;
    justify-content: center;
    align-items: center;
    margin: 5px;
    border-radius: 5px;
    border: 1px solid gray;
    background: rgba(255, 255, 255, 0.2);
    cursor: pointer;
}

.button#number0 {
    flex-grow: 2;
}

.button#colon {
    flex-grow: 1;
}

<div class="numbers">
    <div class="row">
        <div class="button number" id="number1">1</div>
        <div class="button number" id="number2">2</div>
        <div …

设置flex: 1;和设置之间有什么区别flex-grow: 1;？当我在我的代码中设置前者时,我显示的两列具有相同的宽度,而当我设置后者时它们不会这样做.

这很奇怪,因为我认为设置flex: 1;只影响flex-grow属性.

的jsfiddle

我正在尝试使用flexCSS属性将一组元素放入一个整洁的小盒子中.

它看起来在IE10中看起来我想要它,但Chrome显示它非常不同.我基本上有:

• 容器
  • 选择框(flex:5),应该足够宽,以显示D,但不是更宽.
  • 文本输入(flex:10),应占用包含宽度的一半多一点
  • 确认按钮(flex:6)应足够宽以包含其文本,但不能多.

它在IE中运行良好,但在Chrome中,前两个元素占据了宽度的50%,使得确认按钮不再有效.

我的Flex逻辑是错误的,还是Chrome搞砸了？