css的flex弹性布局案例参考

  • 内容
  • 评论
  • 相关
<!doctype html>
<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>数量&nbsp;&nbsp;</div>
<div>-&nbsp;&nbsp;</div>
<div>
<input style="width:30px;border:none;text-align:center;"
   value='1' type="text">
</div>
<div>&nbsp;&nbsp;+</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://www.wlphp.com/?post=377

发表评论

电子邮件地址不会被公开。 必填项已用*标注