相关疑难解决方法(0)

flex-grow不按预期调整flex项目的大小

似乎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;
}
Run Code Online (Sandbox Code Playgroud)
<div class="numbers">
    <div class="row">
        <div class="button number" id="number1">1</div>
        <div class="button number" id="number2">2</div>
        <div …
Run Code Online (Sandbox Code Playgroud)

html css css3 flexbox

36
推荐指数
3
解决办法
6318
查看次数

标签 统计

css ×1

css3 ×1

flexbox ×1

html ×1