預設設定

HTML部份

<div class="container container1">
  <div class="item item1">item1</div>
  <div class="item item2">item2</div>
  <div class="item item3">item3</div>
</div>

CSS部份

.container { background-color: lightgrey; height: 100px; display: flex; }
.item1 { background-color: hotpink; }
.item2 { background-color: greenyellow; }
.item3 { background-color: royalblue; }
/* .item { flex: 0 1 auto; } 這是預設, 不會跟著放大, 會跟著1倍比例縮小, 寬度預設auto自動依內容決定寬度 */
.item { flex-basis: 200px; }
item1
item2
item3

練習1

.container1 .item1 { flex: 0 0 200px; } 不會跟著放大、縮小
.container1 .item3 { flex: 1 1 200px; } 會跟著放大、縮小,並且會填滿父層寬度
item1
item2
item3

練習2

.container2 .item1 { flex: 0 0 100px; } 不會跟著放大、縮小
.container2 .item2 { flex: 1; } 代表 flex: 1 1 auto;
.container2 .item3 { flex: 1; } 會跟著放大、縮小,並且會填滿父層寬度
item1
item2
item3

練習3

.container3 .item1 { flex: 0 0 100px; } 不會跟著放大、縮小
.container3 .item2 { flex: 1; } 剩下空間 1 倍比例跟著放大、縮小
.container3 .item3 { flex: 2; } 剩下空間 2 倍比例跟著放大、縮小
item1
item2
item3