css的flex弹性布局案例参考
<html>
<head>
<title>布局演示案例</title>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
</head>
<body style="background-color:#eee;">
<div style="display:flex;flex-direction:column ;justify-content:center;align-items:center;width:100%;">
<div style="display:flex;flex-direction:row;justify-content:center;padding:20px;width:90%;">本套餐包含下面2种产品</div>
<div style="display:flex;flex-direction:row;justify-content:center;background-color:#fff;padding:20px;color:red;width:90%;">
注：您选择的套餐含有预售产品，预计发货时间11月05日</div>
<div style="display:flex;flex-direction:row;padding:20px;width:95%; flex-wrap: wrap; ">
<div style="display:flex;flex-direction:column;background-color:#eee;width:50%;padding:3px;box-sizing: border-box;background-color:red;">
<div style="background-color:#fff;">
<div style="display:flex;flex-direction:row;justify-content:center;align-items:center;margin:10px;">
<img style="width:80px;height:80px;" src="https://img.alicdn.com/imgextra/i4/O1CN01JuHm9A1L2QJ0IZxxc_!!6000000001241-2-tps-466-466.png">
</div>
<div style="marin:10px;">我是商品名字我是商品名字我是商品名字我是商品名字</div>
<div style="display:flex;flex-direction:row;justify-content:space-around;align-items:center;margin:5px;">
<div style="border:1px solid black;padding:2px;">查看详情</div>
<div>×5</div>
</div>
</div>
</div>
<div style="display:flex;flex-direction:column;width:50%;padding:3px;box-sizing: border-box;background-color:blue;">
<div style="background-color:#fff;">
<div style="display:flex;flex-direction:row;justify-content:center;align-items:center;margin:10px;">
<img style="width:80px;height:80px;" src="https://img.alicdn.com/imgextra/i4/O1CN01JuHm9A1L2QJ0IZxxc_!!6000000001241-2-tps-466-466.png">
</div>
<div style="marin:10px;">我是商品名字我是商品名字我是商品名字我是商品名字</div>
<div style="display:flex;flex-direction:row;justify-content:space-around;align-items:center;margin:5px;">
<div style="border:1px solid black;padding:2px;">查看详情</div>
<div>×5</div>
</div>
</div>
</div>
<div style="display:flex;flex-direction:column;width:50%;padding:3px;box-sizing: border-box;background-color:green;">
<div style="background-color:#fff;">
<div style="display:flex;flex-direction:row;justify-content:center;align-items:center;margin:10px;">
<img style="width:80px;height:80px;" src="https://img.alicdn.com/imgextra/i4/O1CN01JuHm9A1L2QJ0IZxxc_!!6000000001241-2-tps-466-466.png">
</div>
<div style="margin:10px;background-color:red;">我是商品名字我是商品名字我是商品名字我是商品名字</div>
<div style="display:flex;flex-direction:row;justify-content:space-around;align-items:center;margin:5px;">
<div style="border:1px solid black;padding:2px;">查看详情</div>
<div>×5</div>
</div>
</div>
</div>
<div style="display:flex;flex-direction:column;width:50%;padding:3px;box-sizing: border-box;background-color:green;">
<div style="background-color:#fff;">
<div style="display:flex;flex-direction:row;justify-content:center;align-items:center;margin:10px;">
<img style="width:80px;height:80px;" src="https://img.alicdn.com/imgextra/i4/O1CN01JuHm9A1L2QJ0IZxxc_!!6000000001241-2-tps-466-466.png">
</div>
<div style="margin:10px;background-color:red;">我是商品名字我是商品名字我是商品名字我是商品名字</div>
<div style="display:flex;flex-direction:row;justify-content:space-around;align-items:center;margin:5px;">
<div style="border:1px solid black;padding:2px;">查看详情</div>
<div>×5</div>
</div>
</div>
</div>
<div style="display:flex;flex-direction:column;width:50%;padding:3px;box-sizing: border-box;background-color:green;">
<div style="background-color:#fff;">
<div style="display:flex;flex-direction:row;justify-content:center;align-items:center;margin:10px;">
<img style="width:80px;height:80px;" src="https://img.alicdn.com/imgextra/i4/O1CN01JuHm9A1L2QJ0IZxxc_!!6000000001241-2-tps-466-466.png">
</div>
<div style="margin:10px;background-color:red;">我是商品名字我是商品名字我是商品名字我是商品名字</div>
<div style="display:flex;flex-direction:row;justify-content:space-around;align-items:center;margin:5px;">
<div style="border:1px solid black;padding:2px;">查看详情</div>
<div>×5</div>
</div>
</div>
</div>
<div style="display:flex;flex-direction:column;width:50%;padding:3px;box-sizing: border-box;background-color:green;">
<div style="background-color:#fff;">
<div style="display:flex;flex-direction:row;justify-content:center;align-items:center;margin:10px;">
<img style="width:80px;height:80px;" src="https://img.alicdn.com/imgextra/i4/O1CN01JuHm9A1L2QJ0IZxxc_!!6000000001241-2-tps-466-466.png">
</div>
<div style="margin:10px;background-color:red;">我是商品名字我是商品名字我是商品名字我是商品名字</div>
<div style="display:flex;flex-direction:row;justify-content:space-around;align-items:center;margin:5px;">
<div style="border:1px solid black;padding:2px;">查看详情</div>
<div>×5</div>
</div>
</div>
</div>
<div style="display:flex;flex-direction:column;width:50%;padding:3px;box-sizing: border-box;background-color:green;">
<div style="background-color:#fff;">
<div style="display:flex;flex-direction:row;justify-content:center;align-items:center;margin:10px;">
<img style="width:80px;height:80px;" src="https://img.alicdn.com/imgextra/i4/O1CN01JuHm9A1L2QJ0IZxxc_!!6000000001241-2-tps-466-466.png">
</div>
<div style="margin:10px;background-color:red;">我是商品名字我是商品名字我是商品名字我是商品名字</div>
<div style="display:flex;flex-direction:row;justify-content:space-around;align-items:center;margin:5px;">
<div style="border:1px solid black;padding:2px;">查看详情</div>
<div>×5</div>
</div>
</div>
</div>
<div style="display:flex;flex-direction:column;width:50%;padding:3px;box-sizing: border-box;background-color:green;">
<div style="background-color:#fff;">
<div style="display:flex;flex-direction:row;justify-content:center;align-items:center;margin:10px;">
<img style="width:80px;height:80px;" src="https://img.alicdn.com/imgextra/i4/O1CN01JuHm9A1L2QJ0IZxxc_!!6000000001241-2-tps-466-466.png">
</div>
<div style="margin:10px;background-color:red;">我是商品名字我是商品名字我是商品名字我是商品名字</div>
<div style="display:flex;flex-direction:row;justify-content:space-around;align-items:center;margin:5px;">
<div style="border:1px solid black;padding:2px;">查看详情</div>
<div>×5</div>
</div>
</div>
</div>
<div style="display:flex;flex-direction:column;width:50%;padding:3px;box-sizing: border-box;background-color:green;">
<div style="background-color:#fff;">
<div style="display:flex;flex-direction:row;justify-content:center;align-items:center;margin:10px;">
<img style="width:80px;height:80px;" src="https://img.alicdn.com/imgextra/i4/O1CN01JuHm9A1L2QJ0IZxxc_!!6000000001241-2-tps-466-466.png">
</div>
<div style="margin:10px;background-color:red;">我是商品名字我是商品名字我是商品名字我是商品名字</div>
<div style="display:flex;flex-direction:row;justify-content:space-around;align-items:center;margin:5px;">
<div style="border:1px solid black;padding:2px;">查看详情</div>
<div>×5</div>
</div>
</div>
</div>
<div style="display:flex;flex-direction:column;width:50%;padding:3px;box-sizing: border-box;background-color:green;">
<div style="background-color:#fff;">
<div style="display:flex;flex-direction:row;justify-content:center;align-items:center;margin:10px;">
<img style="width:80px;height:80px;" src="https://img.alicdn.com/imgextra/i4/O1CN01JuHm9A1L2QJ0IZxxc_!!6000000001241-2-tps-466-466.png">
</div>
<div style="margin:10px;background-color:red;">我是商品名字我是商品名字我是商品名字我是商品名字</div>
<div style="display:flex;flex-direction:row;justify-content:space-around;align-items:center;margin:5px;">
<div style="border:1px solid black;padding:2px;">查看详情</div>
<div>×5</div>
</div>
</div>
</div>
<div style="display:flex;flex-direction:column;width:50%;padding:3px;box-sizing: border-box;background-color:green;">
<div style="background-color:#fff;">
<div style="display:flex;flex-direction:row;justify-content:center;align-items:center;margin:10px;">
<img style="width:80px;height:80px;" src="https://img.alicdn.com/imgextra/i4/O1CN01JuHm9A1L2QJ0IZxxc_!!6000000001241-2-tps-466-466.png">
</div>
<div style="margin:10px;background-color:red;">我是商品名字我是商品名字我是商品名字我是商品名字</div>
<div style="display:flex;flex-direction:row;justify-content:space-around;align-items:center;margin:5px;">
<div style="border:1px solid black;padding:2px;">查看详情</div>
<div>×5</div>
</div>
</div>
</div>
<div style="display:flex;flex-direction:column;width:50%;padding:3px;box-sizing: border-box;background-color:green;">
<div style="background-color:#fff;">
<div style="display:flex;flex-direction:row;justify-content:center;align-items:center;margin:10px;">
<img style="width:80px;height:80px;" src="https://img.alicdn.com/imgextra/i4/O1CN01JuHm9A1L2QJ0IZxxc_!!6000000001241-2-tps-466-466.png">
</div>
<div style="margin:10px;background-color:red;">我是商品名字我是商品名字我是商品名字我是商品名字</div>
<div style="display:flex;flex-direction:row;justify-content:space-around;align-items:center;margin:5px;">
<div style="border:1px solid black;padding:2px;">查看详情</div>
<div>×5</div>
</div>
</div>
</div>
<div style="display:flex;flex-direction:column;width:50%;padding:3px;box-sizing: border-box;background-color:green;">
<div style="background-color:#fff;">
<div style="display:flex;flex-direction:row;justify-content:center;align-items:center;margin:10px;">
<img style="width:80px;height:80px;" src="https://img.alicdn.com/imgextra/i4/O1CN01JuHm9A1L2QJ0IZxxc_!!6000000001241-2-tps-466-466.png">
</div>
<div style="margin:10px;background-color:red;">我是商品名字我是商品名字我是商品名字我是商品名字</div>
<div style="display:flex;flex-direction:row;justify-content:space-around;align-items:center;margin:5px;">
<div style="border:1px solid black;padding:2px;">查看详情</div>
<div>×5</div>
</div>
</div>
</div>
<div style="display:flex;flex-direction:column;width:50%;padding:3px;box-sizing: border-box;background-color:green;">
<div style="background-color:#fff;">
<div style="display:flex;flex-direction:row;justify-content:center;align-items:center;margin:10px;">
<img style="width:80px;height:80px;" src="https://img.alicdn.com/imgextra/i4/O1CN01JuHm9A1L2QJ0IZxxc_!!6000000001241-2-tps-466-466.png">
</div>
<div style="margin:10px;background-color:red;">我是商品名字我是商品名字我是商品名字我是商品名字</div>
<div style="display:flex;flex-direction:row;justify-content:space-around;align-items:center;margin:5px;">
<div style="border:1px solid black;padding:2px;">查看详情</div>
<div>×5</div>
</div>
</div>
</div>
<div style="display:flex;flex-direction:column;width:50%;padding:3px;box-sizing: border-box;background-color:green;">
<div style="background-color:#fff;">
<div style="display:flex;flex-direction:row;justify-content:center;align-items:center;margin:10px;">
<img style="width:80px;height:80px;" src="https://img.alicdn.com/imgextra/i4/O1CN01JuHm9A1L2QJ0IZxxc_!!6000000001241-2-tps-466-466.png">
</div>
<div style="margin:10px;background-color:red;">我是商品名字我是商品名字我是商品名字我是商品名字</div>
<div style="display:flex;flex-direction:row;justify-content:space-around;align-items:center;margin:5px;">
<div style="border:1px solid black;padding:2px;">查看详情</div>
<div>×5</div>
</div>
</div>
</div>
<div style="display:flex;flex-direction:column;width:50%;padding:3px;box-sizing: border-box;background-color:green;">
<div style="background-color:#fff;">
<div style="display:flex;flex-direction:row;justify-content:center;align-items:center;margin:10px;">
<img style="width:80px;height:80px;" src="https://img.alicdn.com/imgextra/i4/O1CN01JuHm9A1L2QJ0IZxxc_!!6000000001241-2-tps-466-466.png">
</div>
<div style="margin:10px;background-color:red;">我是商品名字我是商品名字我是商品名字我是商品名字</div>
<div style="display:flex;flex-direction:row;justify-content:space-around;align-items:center;margin:5px;">
<div style="border:1px solid black;padding:2px;">查看详情</div>
<div>×5</div>
</div>
</div>
</div>
<div style="display:flex;flex-direction:column;width:50%;padding:3px;box-sizing: border-box;background-color:green;">
<div style="background-color:#fff;">
<div style="display:flex;flex-direction:row;justify-content:center;align-items:center;margin:10px;">
<img style="width:80px;height:80px;" src="https://img.alicdn.com/imgextra/i4/O1CN01JuHm9A1L2QJ0IZxxc_!!6000000001241-2-tps-466-466.png">
</div>
<div style="margin:10px;background-color:red;">我是商品名字我是商品名字我是商品名字我是商品名字</div>
<div style="display:flex;flex-direction:row;justify-content:space-around;align-items:center;margin:5px;">
<div style="border:1px solid black;padding:2px;">查看详情</div>
<div>×5</div>
</div>
</div>
</div>
<div style="display:flex;flex-direction:column;width:50%;padding:3px;box-sizing: border-box;background-color:green;">
<div style="background-color:#fff;">
<div style="display:flex;flex-direction:row;justify-content:center;align-items:center;margin:10px;">
<img style="width:80px;height:80px;" src="https://img.alicdn.com/imgextra/i4/O1CN01JuHm9A1L2QJ0IZxxc_!!6000000001241-2-tps-466-466.png">
</div>
<div style="margin:10px;background-color:red;">我是商品名字我是商品名字我是商品名字我是商品名字</div>
<div style="display:flex;flex-direction:row;justify-content:space-around;align-items:center;margin:5px;">
<div style="border:1px solid black;padding:2px;">查看详情</div>
<div>×5</div>
</div>
</div>
</div>
<div style="display:flex;flex-direction:column;width:50%;padding:3px;box-sizing: border-box;background-color:green;">
<div style="background-color:#fff;">
<div style="display:flex;flex-direction:row;justify-content:center;align-items:center;margin:10px;">
<img style="width:80px;height:80px;" src="https://img.alicdn.com/imgextra/i4/O1CN01JuHm9A1L2QJ0IZxxc_!!6000000001241-2-tps-466-466.png">
</div>
<div style="margin:10px;background-color:red;">我是商品名字我是商品名字我是商品名字我是商品名字</div>
<div style="display:flex;flex-direction:row;justify-content:space-around;align-items:center;margin:5px;">
<div style="border:1px solid black;padding:2px;">查看详情</div>
<div>×5</div>
</div>
</div>
</div>
<div style="display:flex;flex-direction:column;width:50%;padding:3px;box-sizing: border-box;background-color:green;">
<div style="background-color:#fff;">
<div style="display:flex;flex-direction:row;justify-content:center;align-items:center;margin:10px;">
<img style="width:80px;height:80px;" src="https://img.alicdn.com/imgextra/i4/O1CN01JuHm9A1L2QJ0IZxxc_!!6000000001241-2-tps-466-466.png">
</div>
<div style="margin:10px;background-color:red;">我是商品名字我是商品名字我是商品名字我是商品名字</div>
<div style="display:flex;flex-direction:row;justify-content:space-around;align-items:center;margin:5px;">
<div style="border:1px solid black;padding:2px;">查看详情</div>
<div>×5</div>
</div>
</div>
</div>
<div style="display:flex;flex-direction:column;width:50%;padding:3px;box-sizing: border-box;background-color:green;">
<div style="background-color:#fff;">
<div style="display:flex;flex-direction:row;justify-content:center;align-items:center;margin:10px;">
<img style="width:80px;height:80px;" src="https://img.alicdn.com/imgextra/i4/O1CN01JuHm9A1L2QJ0IZxxc_!!6000000001241-2-tps-466-466.png">
</div>
<div style="margin:10px;background-color:red;">我是商品名字我是商品名字我是商品名字我是商品名字</div>
<div style="display:flex;flex-direction:row;justify-content:space-around;align-items:center;margin:5px;">
<div style="border:1px solid black;padding:2px;">查看详情</div>
<div>×5</div>
</div>
</div>
</div>
<div style="display:flex;flex-direction:column;width:50%;padding:3px;box-sizing: border-box;background-color:green;">
<div style="background-color:#fff;">
<div style="display:flex;flex-direction:row;justify-content:center;align-items:center;margin:10px;">
<img style="width:80px;height:80px;" src="https://img.alicdn.com/imgextra/i4/O1CN01JuHm9A1L2QJ0IZxxc_!!6000000001241-2-tps-466-466.png">
</div>
<div style="margin:10px;background-color:red;">我是商品名字我是商品名字我是商品名字我是商品名字</div>
<div style="display:flex;flex-direction:row;justify-content:space-around;align-items:center;margin:5px;">
<div style="border:1px solid black;padding:2px;">查看详情</div>
<div>×5</div>
</div>
</div>
</div>
<div style="display:flex;flex-direction:column;width:50%;padding:3px;box-sizing: border-box;background-color:green;">
<div style="background-color:#fff;">
<div style="display:flex;flex-direction:row;justify-content:center;align-items:center;margin:10px;">
<img style="width:80px;height:80px;" src="https://img.alicdn.com/imgextra/i4/O1CN01JuHm9A1L2QJ0IZxxc_!!6000000001241-2-tps-466-466.png">
</div>
<div style="margin:10px;background-color:red;">我是商品名字我是商品名字我是商品名字我是商品名字</div>
<div style="display:flex;flex-direction:row;justify-content:space-around;align-items:center;margin:5px;">
<div style="border:1px solid black;padding:2px;">查看详情</div>
<div>×5</div>
</div>
</div>
</div>
<div style="display:flex;flex-direction:column;width:50%;padding:3px;box-sizing: border-box;background-color:green;">
<div style="background-color:#fff;">
<div style="display:flex;flex-direction:row;justify-content:center;align-items:center;margin:10px;">
<img style="width:80px;height:80px;" src="https://img.alicdn.com/imgextra/i4/O1CN01JuHm9A1L2QJ0IZxxc_!!6000000001241-2-tps-466-466.png">
</div>
<div style="margin:10px;background-color:red;">我是商品名字我是商品名字我是商品名字我是商品名字</div>
<div style="display:flex;flex-direction:row;justify-content:space-around;align-items:center;margin:5px;">
<div style="border:1px solid black;padding:2px;">查看详情</div>
<div>×5</div>
</div>
</div>
</div>
</div>
<div style="height:40px;">
</div>
<div style="display:flex;flex-direction:row;background-color:#fff;position:fixed;bottom:0;width:100%;justify-content:space-around;height:40px;align-items:center;">
<div style="color:red;">￥300</div>
<div style="display:flex;flex-direction:row;justify-content:space-between;align-items:center;">
<div>数量 </div>
<div>- </div>
<div>
<input style="width:30px;border:none;text-align:center;"
value='1' type="text">
</div>
<div> +</div>
</div>
<div>
<input type="button" value="加入购物车" style="color:#fff;background-color:purple;border-radius:5px;padding:3px;border:none;">
</div>
</div>
<div style="display:flex;flex-direction:row;position:fixed;right:0;bottom:340px;z-index:9999;">
<div style="color:red;">购物车</div>
</div>
<div style="display:flex;flex-direction:row;position:fixed;right:0;bottom:300px;z-index:9999;">
<div style="color:red;">back</div>
</div>
</div>
</body>
</html>
版权声明：若无特殊注明，本文皆为《菜鸟站长》原创，转载请保留文章出处。
本文链接：css的flex弹性布局案例参考 - https://wziyi.com.cn/?post=377
