当前位置：首页 > article >正文

前端学习之Flex布局

article 2025/2/11 10:42:31

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex布局示例</title>
    <style>
        .container {
            /* Flex布局 ，父盒子设置为flex布局后，子元素的float/clear/position/vertical-align属性无效 */
            display: flex;
            /* 水平居中 */
            justify-content:space-around;
            /* 垂直居中 */
            align-items: center;
            /* 容器高度 */
            height: 300px;
            /* 容器宽度 */
            border: 2px solid #333;
            flex-direction:row;
            flex-wrap: nowrap;
        }
        .item {
            /* 子元素宽度 */
            width: 200px;
            /* 子元素高度 */
            height: 100px;
            /* 子元素背景颜色 */
            background-color: #f0f0f0;
            border: 1px solid #ccc;
            /* 子元素居中 */
            display: flex;
            justify-content:center;
            align-items: center;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <section class="container-section">
        <div class="container">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
        </div>
        <h2>Flex布局应用场景</h2>
        <p>Flex布局适用于需要在不同屏幕尺寸上保持良好布局的场景，例如：</p>
        <ul>
            <li>响应式设计：在不同设备上自动调整元素的排列方式。</li>
            <li>导航栏：创建水平或垂直的导航菜单。</li>
            <li>卡片布局：在页面上均匀分布卡片元素。</li>
        </ul>
        <h2>Flex布局优缺点</h2>
        <h3>优点</h3>
        <ul>
            <li>简化布局代码：无需使用浮动或定位来实现复杂的布局。</li>
            <li>自动调整大小：子元素可以根据容器大小自动调整。</li>
            <li>对齐方式灵活：可以轻松控制子元素的对齐方式。</li>
        </ul>
        <h3>缺点</h3>
        <ul>
            <li>浏览器兼容性：虽然现代浏览器普遍支持Flexbox，但旧版浏览器可能存在兼容性问题。</li>
            <li>学习曲线：对于不熟悉Flexbox的开发者，需要一些时间来掌握其工作原理。</li>
            <li>复杂布局限制：对于非常复杂的布局，Flexbox可能不如Grid布局灵活。</li>
        </ul>
    </section>
    <h1>响应式布局demo如下</h1>
    <section class="container-responsive">
        <style>
            .responsive-container {
                display: flex;
                flex-wrap: wrap; /* 允许子元素换行 */
                justify-content: space-around;
                border: 2px solid #333;
                padding: 10px;
            }

            .responsive-item {
                width: calc(25% - 40px); /* 每个子元素占据1/3宽度，减去间距 */
                margin: 10px;
                background-color: #f0f0f0;
                border: 1px solid #ccc;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 20px;
            }

            @media (max-width: 960px) {
                .responsive-item {
                    width: calc(50% - 40px); /* 在较小屏幕上，每个子元素占据1/2宽度 */
                }
            }

            @media (max-width: 480px) {
                .responsive-item {
                    width: 100%; /* 在非常小的屏幕上，每个子元素占据100%宽度 */
                }
            }
        </style>
        <div class="responsive-container">
            <div class="responsive-item">responsive Item 1</div>
            <div class="responsive-item">responsive Item 2</div>
            <div class="responsive-item">responsive Item 3</div>
            <div class="responsive-item">responsive Item 4</div>
        </div>
    </section>
    <h1>导航栏demo如下</h1>
    <selection class="nav">
        <style>
            .navbar {
                display: flex;
                justify-content: space-around;
                background-color: #333;
                padding: 10px;
            }

            .nav-item {
                color: white;
                font-size: 18px;
                cursor: pointer;
            }

            .nav-item:hover {
                color: #ffcc00;
            }
        </style>
        <nav class="navbar">
            <div class="nav-item">Home</div>
            <div class="nav-item">About</div>
            <div class="nav-item">Services</div>
            <div class="nav-item">Contact</div>
        </nav>
    </selection>
    <h1>卡片布局demo如下</h1>
    <section class="card">
        <style>
            .card-container {
                display: flex;
                justify-content: space-around;
                flex-wrap: wrap;
                padding: 10px;
            }

            .card {
                width: calc(33.333% - 20px);
                margin: 10px;
                background-color: #f0f0f0;
                border: 1px solid #ccc;
                padding: 20px;
                box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.1);
            }

            .card h3 {
                margin-top: 0;
            }

            .card p {
                margin-bottom: 0;
            }
        </style>
        <div class="card-container">
            <div class="card">
                <h3>Card 1</h3>
                <p>This is the content of card 1.</p>
            </div>
            <div class="card">
                <h3>Card 2</h3>
                <p>This is the content of card 2.</p>
            </div>
            <div class="card">
                <h3>Card 3</h3>
                <p>This is the content of card 3.</p>
            </div>
        </div>
    </section>
</body>
</html>