`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%; */ } ~~~