利用 flex 讓寬度自動配合內容

【HTML】 

<section>

  <h2>flex-direction: row</h2>

  <div class="flex-container">

    <div class="flex-item f1">內容 A</div>

    <div class="flex-item f2">內容 B</div>

    <div class="flex-item f3">內容 C</div>

    <div class="flex-item f4">內容 D</div>

    <div class="flex-item f1">內容 AA</div>

    <div class="flex-item f2">內容 BB</div>

    <div class="flex-item f3">內容 CC</div>

    <div class="flex-item f4">內容 DD</div>

    <div class="flex-item f1">內容 AAA</div>

    <div class="flex-item f2">內容 BBB</div>

    <div class="flex-item f3">內容 CCC</div>

    <div class="flex-item f4">內容 DDD</div>

    <div class="flex-item f1">內容 AAAA</div>

    <div class="flex-item f2">內容 BBBB</div>

    <div class="flex-item f3">內容 CCCC</div>

    <div class="flex-item f4">內容 DDDD</div>

  </div>

</section>

【CSS】

.flex-item.f1 {background: #97b0c6;}

.flex-item.f2 {background: #caa51e;}

.flex-item.f3 {background: #3d973a;}

.flex-item.f4 {background: #d97018; flex: auto;}

.flex-item {

  padding: 1em;

}

.flex-container {

  width: 80%;

  margin: 0 auto;

  border: 1px solid #ccc;

}

.flex-container {

  display: flex;

  flex-wrap: wrap;

  flex: 1;

  -webkit-flex: 1;

  flex-direction: row;

}

【資料來源】https://codepen.io/Chenyu/pen/aGZoJg