flex实际应用-- flex-card布局

最新推荐文章于 2024-07-21 21:06:06 发布

AsaZyf

最新推荐文章于 2024-07-21 21:06:06 发布

阅读量819

点赞数

本文链接：https://blog.csdn.net/AsaZyf/article/details/84305106

版权

本文深入探讨了CSS3的Flex布局特性，通过实例展示了如何使用flex创建响应式的flex-card布局。内容包括flex容器的配置、flex项的排列方式以及如何调整元素的大小和对齐方式，以达到灵活且适应不同屏幕尺寸的效果。

摘要由CSDN通过智能技术生成

code:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Flex实际应用-信息card</title>
    <link rel="stylesheet" type="text/css" href="./reset.css">
    <style>
        * {
            margin:0;
            padding:0;
        }
        /*优惠券容器*/
        .coupon {
            width: 440px;
            height: 120px;
    
            padding: 16px;
            margin:20px;
            box-sizing: border-box;

            background: #fbfbfb;
            color: #666666;

            display: flex;
            justify-content: space-between;
        }
        /*按钮*/
        .btn {
            width: 80px;