CSS弹性布局问题：空间分配不均匀问题

huangapple
go评论88阅读模式
英文:

css flex layout problem:space allocation not even problem

问题

这是我的代码：

  1. <!-- 开始代码片段: js 隐藏: false 控制台: true Babel: false -->
  3. <!-- 语言: lang-css -->
  4. .cell {
  5.   border: 1px solid red;
  6.   display: flex;
  7.   flex-grow: 1;
  8.   margin: 0px;
  9.   padding: 3px;
  10. }
  12. .container {
  13.   display: flex;
  14.   flex-direction: column;
  15.   height: 100%;
  16.   margin: 0px;
  17. }
  19. .row {
  20.   display: flex;
  21.   flex-direction: row;
  22.   flex-grow: 1;
  23.   margin: 0px;
  24. }
  26. html {
  27.   height: 100%;
  28.   margin: 0px;
  29.   padding: 0px;
  30. }
  32. body {
  33.   /*border:1px solid black;*/
  34.   height: calc(100% - 20px);
  35.   margin: 10px;
  36.   padding: 0px;
  37. }
  39. <!-- 语言: lang-html -->
  40. <html>
  41.   <body onload="">
  42.     <div class="container">
  43.       <div class="row">
  44.         <div class="cell">Caller</div>
  45.         <div class="cell">Callee</div>
  46.       </div>
  47.       <div class="row">
  48.         <div class="cell">
  49.           sdsdfddd
  50.         </div>
  51.         <div class="cell">sdfdsf</div>
  52.       </div>
  53.     </div>
  54.   </body>
  55. </html>
  57. <!-- 结束代码片段 -->

为什么第一行单元格的空间分配是均匀的，而第二行单元格不均匀呢？如何使第二行的空间分配与第一行相同？

英文:

Here is my code:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. .cell {
  2.   border: 1px solid red;
  3.   display: flex;
  4.   flex-grow: 1;
  5.   margin: 0px;
  6.   padding: 3px;
  7. }
  9. .container {
  10.   display: flex;
  11.   flex-direction: column;
  12.   height: 100%;
  13.   margin: 0px;
  14. }
  16. .row {
  17.   display: flex;
  18.   flex-direction: row;
  19.   flex-grow: 1;
  20.   margin: 0px;
  21. }
  23. html {
  24.   height: 100%;
  25.   margin: 0px;
  26.   padding: 0px;
  27. }
  29. body {
  30.   /*border:1px solid black;*/
  31.   height: calc(100% - 20px);
  32.   margin: 10px;
  33.   padding: 0px;
  34. }

<!-- language: lang-html -->

  1. &lt;html&gt;
  2.   &lt;body onload=&quot;&quot;&gt;
  3.     &lt;div class=&quot;container&quot;&gt;
  4.       &lt;div class=&quot;row&quot;&gt;
  5.         &lt;div class=&quot;cell&quot;&gt;Caller&lt;/div&gt;
  6.         &lt;div class=&quot;cell&quot;&gt;Callee&lt;/div&gt;
  7.       &lt;/div&gt;
  8.       &lt;div class=&quot;row&quot;&gt;
  9.         &lt;div class=&quot;cell&quot;&gt;
  10.           sdsdfddd
  11.         &lt;/div&gt;
  12.         &lt;div class=&quot;cell&quot;&gt;sdfdsf&lt;/div&gt;
  13.       &lt;/div&gt;
  14.     &lt;/div&gt;
  15.   &lt;/body&gt;
  16. &lt;/html&gt;

<!-- end snippet -->

The space allocation for the first-row cells is even, why the second-row cells are not even?
How can I make the space allocation as the first row?

答案1

得分: 1

添加 flex-basis: 0;（或使用 flex: 1 简写）

  1. .cell {
  2.   border: 1px solid red;
  3.   display: flex;
  4.   flex-grow: 1;
  5.   flex-basis: 0;
  6.   margin: 0px;
  7.   padding: 3px;
  8. }
英文:

Add flex-basis: 0; (or use flex:1 shorthand)

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. .cell {
  2.   border: 1px solid red;
  3.   display: flex;
  4.   flex-grow: 1;
  5.   flex-basis: 0;
  6.   margin: 0px;
  7.   padding: 3px;
  8. }
  10. .container {
  11.   display: flex;
  12.   flex-direction: column;
  13.   height: 100%;
  14.   margin: 0px;
  15. }
  17. .row {
  18.   display: flex;
  19.   flex-direction: row;
  20.   flex-grow: 1;
  21.   margin: 0px;
  22. }
  24. html {
  25.   height: 100%;
  26.   margin: 0px;
  27.   padding: 0px;
  28. }
  30. body {
  31.   /*border:1px solid black;*/
  32.   height: calc(100% - 20px);
  33.   margin: 10px;
  34.   padding: 0px;
  35. }

<!-- language: lang-html -->

  1. &lt;html&gt;
  2.   &lt;body onload=&quot;&quot;&gt;
  3.     &lt;div class=&quot;container&quot;&gt;
  4.       &lt;div class=&quot;row&quot;&gt;
  5.         &lt;div class=&quot;cell&quot;&gt;Caller&lt;/div&gt;
  6.         &lt;div class=&quot;cell&quot;&gt;Callee&lt;/div&gt;
  7.       &lt;/div&gt;
  8.       &lt;div class=&quot;row&quot;&gt;
  9.         &lt;div class=&quot;cell&quot;&gt;
  10.           sdsdfddd
  11.         &lt;/div&gt;
  12.         &lt;div class=&quot;cell&quot;&gt;sdfdsf&lt;/div&gt;
  13.       &lt;/div&gt;
  14.     &lt;/div&gt;
  15.   &lt;/body&gt;
  16. &lt;/html&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年6月18日 21:23:18
  • 转载请务必保留本文链接：https://go.coder-hub.com/76500760.html
  • css
  • flexbox
  • html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定