Question

我有以下内容：

＆＃13;

#subsystemTabs{
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  flex-flow: center;
}

#rightPad, #leftPad{
  height: 50px;
  margin: auto;
  border: solid;
  flex-grow: 100;
}

.subsystemTab{
  width: 50px;
  height: 50px;
  background-color: blue;
  border: solid;
}

＆＃13;

<div id="subsystemTabs">
  <div id="rightPad"></div>
  <div class="subsystemTab"></div>
  <div class="subsystemTab"></div>
  <div class="subsystemTab"></div>
  <div class="subsystemTab"></div>
  <div class="subsystemTab"></div>
  <div class="subsystemTab"></div>
  <div class="subsystemTab"></div>
  <div id="leftPad"></div>
</div>

＆＃13;

我希望两个端盒#rightPad和#leftPad扩展以填充容器的其余部分。我用过flex-grow：100;在两端div上，这是有效的，但我不觉得它是正确的，因为理论上如果页面很大，那么两个终端div最终会停止增长。

有没有更好的方法来实现这一目标？

提前致谢！

Answer 1

.subsystemTabs:first-child{
 height: 50px;
 margin: auto;
 border: solid;
 padding-left: 50px; //lets say
}
.subsystemTabs:last-child{
 height: 50px;
 margin: auto;
 border: solid;
 padding-right: 50px; //lets say
}

我不认为这是确切的填充，这只是为了让你知道如何才能做到正确。

Answer 2

如果你想使用flex，停止尝试控制宽度，它会破坏“灵活”的目的，但如果你必须设置宽度，请使用min / max-width css。

正如您所见here @ CSSTricks，弹性增长数是一个比率。但受容器宽度和固定宽度元素的影响

intersect

#subsystemTabs, #subsystemTabs2, #subsystemTabs3{
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  flex-flow: center;
}
#subsystemTabs2{
   width: 80%;
}
#subsystemTabs3{
   width: 50%;
}


#rightPad, #leftPad{
  height: 50px;
  margin: auto;
  border: solid;
  flex-grow: 2;
}

.subsystemTab{
  max-width: 50px;
  min-width:50px;
  height: 50px;
  flex-grow: 1;
  background-color: blue;
  border: solid;
}

.subsystemTab2{
  height: 50px;
  flex-grow: 1;
  background-color: blue;
  border: solid;
}

Answer 3

您只能在需要填补剩余空间的容器上使用：flex:1;。

如果您设置margin:auto;元素将缩小并居中，不要，您将不必设置任何大小。

您也可以在孩子身上使用min-width代替width。

如果您需要设置height，则可以在父级上执行此操作，元素将自行调整为此height。 min-height也可以使用。如果它是用于演示，你可以删除它，最高的元素将是整行的高度。

#subsystemTabs{
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  flex-flow: center;
  height: 50px;
}

#rightPad, #leftPad{
  border: solid;
  flex:1;
  background:yellow;
}

.subsystemTab{
  min-width: 50px;
  background-color: blue;
  border: solid black;
  display:flex;
  align-items:center;
  justify-content:center;
  color:white;
}

<div id="subsystemTabs">
  <div id="rightPad"></div>
  <div class="subsystemTab">sys 1</div>
  <div class="subsystemTab">2</div>
  <div class="subsystemTab">here is the third</div>
  <div class="subsystemTab">and 4</div>
  <div class="subsystemTab">and then 5</div>
  <div class="subsystemTab"> 6 ?</div>
  <div class="subsystemTab">Seven the last !</div>
  <div id="leftPad"></div>
</div>

Answer 4

我愿意这样。首先从class subsystemTab中删除flex propreties和固定宽度，并为id leftPad，rightPad和class subsystemTab添加instad procentual width。并使用box-sizing: border-box;

#subsystemTabs{
  width: 100%;
}

#rightPad, #leftPad{
  height: 50px;
  margin: auto;
  width: 15%;
  border: solid;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  float:left
}

.subsystemTab{
  width: 10%;
  height: 50px;
  background-color: blue;
  border: solid;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  float:left
}

展开结束div以填充剩余空间

4 个答案: