`flex`屬性是`flex-grow`,`flex-shrink`和`flex-basis`的簡寫，默認值為`0 1 auto`。后兩個屬性可選。 ~~~css .item { flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] } ~~~ 該屬性有兩個快捷值：`auto`(`1 1 auto`) 和 none (`0 0 auto`)。 建議優先使用這個屬性，而不是單獨寫三個分離的屬性，因為瀏覽器會推算相關值。 ~~~html <div class="box"> <div class="box-item">1</div> <div class="box-item">2</div> <div class="box-item">3</div> </div> ~~~ ~~~css .box { display: flex; background-color: white; } .box-item { width: 200px; height: 200px; line-height: 200px; vertical-align: middle; margin: 5px; background-color: #ffd200; font-size: 100px; color: white; text-align: center; } .box-item div { font-size: 14px; position: relative; top: -150px; } .box-item { flex: 1; /* 等同于 flex: 1 1 0%; */ } ~~~