英文:
css flex layout problem:space allocation not even problem
问题
这是我的代码：
<!-- 开始代码片段: js 隐藏: false 控制台: true Babel: false -->
<!-- 语言: lang-css -->
.cell {
border: 1px solid red;
display: flex;
flex-grow: 1;
margin: 0px;
padding: 3px;
}
.container {
display: flex;
flex-direction: column;
height: 100%;
margin: 0px;
}
.row {
display: flex;
flex-direction: row;
flex-grow: 1;
margin: 0px;
}
html {
height: 100%;
margin: 0px;
padding: 0px;
}
body {
/*border:1px solid black;*/
height: calc(100% - 20px);
margin: 10px;
padding: 0px;
}
<!-- 语言: lang-html -->
<html>
<body onload="">
<div class="container">
<div class="row">
<div class="cell">Caller</div>
<div class="cell">Callee</div>
</div>
<div class="row">
<div class="cell">
sdsdfddd
</div>
<div class="cell">sdfdsf</div>
</div>
</div>
</body>
</html>
<!-- 结束代码片段 -->
为什么第一行单元格的空间分配是均匀的，而第二行单元格不均匀呢？如何使第二行的空间分配与第一行相同？
英文:
Here is my code:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.cell {
border: 1px solid red;
display: flex;
flex-grow: 1;
margin: 0px;
padding: 3px;
}
.container {
display: flex;
flex-direction: column;
height: 100%;
margin: 0px;
}
.row {
display: flex;
flex-direction: row;
flex-grow: 1;
margin: 0px;
}
html {
height: 100%;
margin: 0px;
padding: 0px;
}
body {
/*border:1px solid black;*/
height: calc(100% - 20px);
margin: 10px;
padding: 0px;
}
<!-- language: lang-html -->
<html>
<body onload="">
<div class="container">
<div class="row">
<div class="cell">Caller</div>
<div class="cell">Callee</div>
</div>
<div class="row">
<div class="cell">
sdsdfddd
</div>
<div class="cell">sdfdsf</div>
</div>
</div>
</body>
</html>
<!-- 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 简写）
.cell {
border: 1px solid red;
display: flex;
flex-grow: 1;
flex-basis: 0;
margin: 0px;
padding: 3px;
}
英文:
Add flex-basis: 0; (or use flex:1 shorthand)
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.cell {
border: 1px solid red;
display: flex;
flex-grow: 1;
flex-basis: 0;
margin: 0px;
padding: 3px;
}
.container {
display: flex;
flex-direction: column;
height: 100%;
margin: 0px;
}
.row {
display: flex;
flex-direction: row;
flex-grow: 1;
margin: 0px;
}
html {
height: 100%;
margin: 0px;
padding: 0px;
}
body {
/*border:1px solid black;*/
height: calc(100% - 20px);
margin: 10px;
padding: 0px;
}
<!-- language: lang-html -->
<html>
<body onload="">
<div class="container">
<div class="row">
<div class="cell">Caller</div>
<div class="cell">Callee</div>
</div>
<div class="row">
<div class="cell">
sdsdfddd
</div>
<div class="cell">sdfdsf</div>
</div>
</div>
</body>
</html>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论