首頁猿問 Flex-按預期增長，而不是調整F...

Flex-按預期增長，而不是調整FLEX項目的大小。

Html5 CSS3 Html/CSS

幕布斯6054654 2019-07-11 10:43:14

Flex-按預期增長，而不是調整FLEX項目的大小?？雌饋?，Flexdiv中的內容會影響到它的計算大小。flex-grow財產。我做錯什么了嗎？在下面提供的小提琴中，你會看到一個數字墊。除底部行外，所有行都包含3個數字。該行的“0”應為兩個數字的寬度，因此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 class="button number" id="number3">3</div> </div> <div class="row"> <div class="button number" id="number4">4</div> <div class="button number" id="number5">5</div> <div class="button number" id="number6">6</div> </div> <div class="row"> <div class="button number" id="number7">7</div> <div class="button number" id="number8">8</div> <div class="button number" id="number9">9</div> </div> <div class="row"> <div class="button number" id="number0">0</div> <div class="button" id="colon">:</div> </div></div>https://jsfiddle.net/0r4hemdu/

查看完整描述

3 回答

Smart貓小萌

TA貢獻1911條經驗獲得超7個贊

短分析

問題是，第1-3行有兩個水平邊距，第4行只有一個。

在水平邊距為10 px的情況下，第4行的空閑空間比其他行多10 px。這就拋出了列的對齊。

因為flex-grow僅適用于空閑空間，并且受內容和頁邊距的嚴重影響，它并不是最安全的大小彈性項目的方法。

試一試flex-basis相反。將此添加到代碼中：

.button { flex-basis: 33.33%; }

#number0 { flex-basis: calc(66.67% + 10px); }

* { box-sizing: border-box; }

.numbers {
    display: flex;
    flex-direction: column;}.row {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    justify-content: space-between;}.button {
    display: flex;
    flex-basis: 33.33%;
    justify-content: center;
    align-items: center;
    margin: 5px;
    border-radius: 5px;
    border: 1px solid gray;
    background: rgba(255, 255, 255, 0.2);
    cursor: pointer;}#number0   { flex-basis: calc(66.67% + 10px); }*          { box-sizing: border-box; }

<div class="numbers">
    <div class="row">
        <div class="button number" id="number1">1</div>
        <div class="button number" id="number2">2</div>
        <div class="button number" id="number3">3</div>
    </div>
    <div class="row">
        <div class="button number" id="number4">4</div>
        <div class="button number" id="number5">5</div>
        <div class="button number" id="number6">6</div>
    </div>
    <div class="row">
        <div class="button number" id="number7">7</div>
        <div class="button number" id="number8">8</div>
        <div class="button number" id="number9">9</div>
    </div>
    <div class="row">
        <div class="button number" id="number0">0</div>
        <div class="button" id="colon">:</div>
    </div></div>

擴展分析

你寫道：

看起來，Flexdiv中的內容會影響到它的計算大小。flex-grow財產。我做錯什么了嗎？

問題的根源不是FLEX項目中的內容。

你寫道：

在下面提供的小提琴中，你會看到一個數字墊。除底部行外，所有行都包含3個數字。該行的“0”應為兩個數字的寬度，因此flex-grow: 2和“：”是一個數字的大小，因此flex-grow: 1..我是不是漏掉了什么？

是。你對flex-grow屬性不正確。flex-grow不用于定義FLEX項的大小。它的工作是在各個項目之間分配Flx容器中的空閑空間。

通過應用flex-grow: 1對于一組Flx項目，您告訴它們在它們之間平均分配空閑空間。這就是為什么在您的演示中，第1行、第2行和第3行具有相同大小的Flex項目。

當你申請flex-grow: 2，您正在告訴Flex項消耗的空閑空間是以下項的兩倍flex-grow: 1.

但是，從上述因素到第4行布局的第二個10 px邊距在哪里？

在第4行上取消對齊的原因是，第4行的空隙比其他行少一個，這意味著第4行的空閑空間比其他行多10 px。

你會注意到如果你刪除保證金規則你得到了你想要的對齊。

.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 class="button number" id="number3">3</div>
    </div>
    <div class="row">
        <div class="button number" id="number4">4</div>
        <div class="button number" id="number5">5</div>
        <div class="button number" id="number6">6</div>
    </div>
    <div class="row">
        <div class="button number" id="number7">7</div>
        <div class="button number" id="number8">8</div>
        <div class="button number" id="number9">9</div>
    </div>
    <div class="row">
        <div class="button number" id="number0">0</div>
        <div class="button" id="colon">:</div>
    </div></div>

那么，第四行到第二行10%的保證金又會發生什么呢？

它會被這兩個撓性物品吸收。

以下是如何flex-grow分配第四行的額外空間：
保留的Flex項(內容為“0”)
flex-grow: 2. (.button#number0
(在您的代碼中。)
Flex項目權限(內容為“：”)
flex-grow: 1. (.button#colon
(在您的代碼中。)
第二個項間邊距僅出現在包含三個FLEX項的行上，寬度為10 px。(代碼在每個項目周圍顯示5 px，但在css中
水平邊緣永不塌陷
..此外，在柔性箱中，
無邊緣塌陷.)
的總和
flex-grow
價值是三。讓我們除以10 px乘以3，現在我們知道1的比例是3.33px。
因此，左邊的Flex項獲得6.66px的額外空間，而Flex Item右側的額外空間為3.33px。
假設剩下的柔韌物品
flex-grow: 3
相反。然后，左邊的FLEX項將得到7.5px，而FLEX項的右側將得到2.5px。

你問題的最后一部分是：

“0”的右側應與其上方的8、5和2對齊。有點不對勁。

因為flex-grow僅適用于空閑空間，并且受內容和頁邊距的嚴重影響，它并不是最安全的大小彈性項目的方法。

試一試flex-basis相反。將此添加到代碼中：

.button { flex-basis: 33.33%; }

#number0 { flex-basis: calc(66.67% + 10px); }

* { box-sizing: border-box; }

.numbers {
    display: flex;
    flex-direction: column;}.row {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    justify-content: space-between;}.button {
    display: flex;
    flex-basis: 33.33%;
    justify-content: center;
    align-items: center;
    margin: 5px;
    border-radius: 5px;
    border: 1px solid gray;
    background: rgba(255, 255, 255, 0.2);
    cursor: pointer;}#number0   { flex-basis: calc(66.67% + 10px); }*          { box-sizing: border-box; }

<div class="numbers">
    <div class="row">
        <div class="button number" id="number1">1</div>
        <div class="button number" id="number2">2</div>
        <div class="button number" id="number3">3</div>
    </div>
    <div class="row">
        <div class="button number" id="number4">4</div>
        <div class="button number" id="number5">5</div>
        <div class="button number" id="number6">6</div>
    </div>
    <div class="row">
        <div class="button number" id="number7">7</div>
        <div class="button number" id="number8">8</div>
        <div class="button number" id="number9">9</div>
    </div>
    <div class="row">
        <div class="button number" id="number0">0</div>
        <div class="button" id="colon">:</div>
    </div></div>

jsFiddle演示

參考資料：

flex-grow定義
~MDN
flex-basis定義
~MDN
7.2靈活性的組成部分
~W3C

額外：CSS網格解決方案

隨著CSS網格的出現，整個布局的代碼可以大大簡化。

.numbers {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(26%, 1fr));
  grid-gap: 10px;}#number0 {
  grid-column: span 2;}/* non-essential decorative styles */.button {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  border: 1px solid gray;}

<div class="numbers">
  <div class="button number" id="number1">1</div>
  <div class="button number" id="number2">2</div>
  <div class="button number" id="number3">3</div>
  <div class="button number" id="number4">4</div>
  <div class="button number" id="number5">5</div>
  <div class="button number" id="number6">6</div>
  <div class="button number" id="number7">7</div>
  <div class="button number" id="number8">8</div>
  <div class="button number" id="number9">9</div>
  <div class="button number" id="number0">0</div>
  <div class="button" id="colon">:</div></div>

反對回復 2019-07-11

叮當貓咪

TA貢獻1776條經驗獲得超12個贊

我認為邁克爾·B說的一切都是正確的。只有解決辦法有點尷尬。我個人不喜歡卡卡。只是感覺不對勁。

你遇到的問題是一個更普遍的問題。你把太多的責任放在一個元素上。在這種情況下，.button班級，等級。彈性和保證金與彈性增長是太多的責任。試著把它拆開。它意味著更多的DOM元素，但它為您節省了很多痛苦。

.numbers {

display: flex;

flex-direction: column;

max-width: 200px;

margin: 0 auto;

}

.row {

display: flex;

flex-direction: row;

flex-grow: 1;

justify-content: space-between;

}

.row > .box {

display: flex;

flex-basis: 33.3333%;

justify-content: center;

align-items: center;

}

.row > .box.box-2 {

flex-basis: 66.6667%;

}

.button {

border-radius: 5px;

border: 1px solid gray;

background: rgba(255, 255, 255, 0.2);

cursor: pointer;

width: auto;

text-align: center;

margin: 5px;

width: 100%;

}

</div>

</div>

</div>

</div>

反對回復 2019-07-11

3 回答
0 關注
668 瀏覽

關注

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

Flex-按預期增長，而不是調整FLEX項目的大小。

Flex-按預期增長，而不是調整FLEX項目的大小。

3 回答

短分析

擴展分析

額外：CSS網格解決方案

相關問題推薦

添加回答

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

Flex-按預期增長，而不是調整FLEX項目的大小。

Flex-按預期增長，而不是調整FLEX項目的大小。

3 回答

短分析

擴展分析

額外：CSS網格解決方案

相關問題推薦

添加回答

Flex-按預期增長，而不是調整FLEX項目的大小。

Flex-按預期增長，而不是調整FLEX項目的大小。