拆分最后一个标签宽度为50％，所有其他标签应该适合其他50％宽度

Question

需要以这样的方式拆分所有标签。最后一个标签宽度为50％宽度，其余所有标签必须为50％。现在我给出了固定宽度：16.65％。希望避免它，因为可能有2个或3个标签，不包括最后一个标签。

可以使用display: flex来实现吗？

＆＃13;

＆＃13;

* {
  margin: 0;
}

.wrapper {
  overflow: hidden
}

.wrapper .tab {
  float: left;
  width: 16.65%;
  text-align: center;
  background: #ccc;
}

.wrapper .last-tab {
  width: 50%;
  background: #999
}

＆＃13;

<div class="wrapper">
  <div class="tab">Tab 1</div>
  <div class="tab">Tab 2</div>
  <div class="tab">Tab 3</div>
  <div class="tab last-tab">Last Tab</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

你可以这样做：

＆＃13;

＆＃13;

* {
  margin: 0;
}

.wrapper {
  display: flex; /* displays children inline */
  overflow: hidden;
}

.wrapper > .tab {
  flex: 1; /* enables growing of flex-items so they can fill flex-containers width / this is the shorthand way, but you can also use: flex: 1 1 auto; (i.e. flex-grow, flex-shrink, flex-basis) */
  /*float: left;*/
  /*width: 16.65%;*/
  text-align: center;
  background: #ccc;
}

.wrapper > .last-tab {
  /*width: 50%;*/
  flex: 0 1 50%; /* adjusted to take half of the wrappers width (i.e. initial width is set to 50%) */
  background: #999;
}

＆＃13;

<div class="wrapper">
  <div class="tab">Tab 1</div>
  <div class="tab">Tab 2</div>
  <div class="tab">Tab 3</div>
  <div class="tab last-tab">Last Tab</div>
</div>

＆＃13;

＆＃13;

＆＃13;

如果您想在不使用width属性的情况下使用纯 flexbox 方式。

Answer 2

试试这个

＆＃13;

＆＃13;

* {
  margin: 0;
}

.wrapper {
  overflow: hidden;
  display: flex;
  width: 100%;
}

.wrapper .tab {
  width: calc(50%/3);
  text-align: center;
  background: #ccc;
}

.wrapper .last-tab {
  width: 50%;
  background: #999
}

＆＃13;

<div class="wrapper">
  <div class="tab">Tab 1</div>
  <div class="tab">Tab 2</div>
  <div class="tab">Tab 3</div>
  <div class="tab last-tab">Last Tab</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

取2块50-50％。然后你可以根据你的要求轻松划分内部div。

希望这可以帮助你：）

* {
  margin: 0;
}

.wrapper {
  /*overflow: hidden*/
  display:flex;
}

.wrapper .tab-container {
  /*float: left;*/
  display:flex;
  width: 50%;
  background: #ccc;
}

.wrapper .tab {
  /*float: left;*/
  display:flex;
  width: 33.33%;
  text-align: center;
}

.wrapper .last-tab {
  width: 50%;
  background: #999;
  text-align: center;
}

<div class="wrapper">
  <div class="tab-container">
    <div class="tab">Tab 1</div>
    <div class="tab">Tab 2</div>
    <div class="tab">Tab 3</div>
   </div>
  <div class="last-tab">Last Tab</div>
</div>