HTML部分:
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width, initial-scale=1.0"/><metahttp-equiv="X-UA-Compatible"content="ie=edge"/><linkrel="stylesheet"href="./index.css"/><title>Flex 布局</title></head><body><divclass="flex-auto"><divclass="static"></div><divclass="flexible"></div></div></body></html>
CSS部分:
@keyframes expand{0%{width: 100%;}100%{width: 70%;}}.flex-auto{padding: 4px;background: #282a35;animation: expand 3s alternate infinite both;height: 100px;display: flex;}.flex-auto .static{width: 100px;flex: none;background-color: #d5e8d4;}.flex-auto .flexible{flex: 1;background-color: #fff2cc;}