Web实现:flex弹性布局两栏自适应布局

2022-03-13 10:06:01

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;}
  • 作者:jasmyn518
  • 原文链接:https://blog.csdn.net/jasmyn518/article/details/123275950
    更新时间:2022-03-13 10:06:01