CSS3 弹性布局详解-CSDN博客

本文链接：https://blog.csdn.net/weixin_45075226/article/details/149081344

本文详解介绍了CSS3 弹性布局的相关知识，包括弹性布局是什么、弹性容器属性、弹性项目属性以及如何在移动端页面实现弹性布局等等。

本文目录

一、弹性布局

弹性布局是一种一维布局模型，用于为盒状模型提供最大的灵活性。通过将元素设置为 display: flex 或 display: inline-flex，可以将其变为弹性容器，其直接子元素成为弹性项目。

二、弹性容器属性

flex-direction 用于定义主轴的方向（row、row-reverse、column、column-reverse）；
flex-wrap 用于控制弹性项目是否换行（nowrap、wrap、wrap-reverse）；
justify-content 用于定义弹性项目在主轴上的对齐方式（flex-start、flex-end、center、space-between、space-around 等）；
align-items 用于定义弹性项目在交叉轴上的对齐方式（flex-start、flex-end、center、baseline、stretch）；
align-content 用于定义多行弹性项目在交叉轴上的对齐方式（当 flex-wrap 为 wrap 或 wrap-reverse 时有效）。

三、弹性项目属性

flex-grow 用于定义弹性项目的放大比例；
flex-shrink 用于定义弹性项目的缩小比例；
flex-basis 用于定义弹性项目在主轴上的初始大小；
order 用于定义弹性项目的排列顺序；
align-self 用于单独定义某个弹性项目在交叉轴上的对齐方式。

下面实现使用弹性布局排列商品卡片。

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

<head>
    <meta charset="UTF-8">
    <style>
       .product-list {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }

       .product-card {
            width: 200px;
            border: 1px solid #ccc;
            padding: 10px;
            margin-bottom: 20px;
        }
    </style>
</head>

<body>
    <div class="product-list">
        <div class="product-card">
            <img src="product1.jpg" alt="商品 1">
            <h3>商品 1</h3>
            <p>商品描述 1</p>
        </div>
        <div class="product-card">
            <img src="product2.jpg" alt="商品 2">
            <h3>商品 2</h3>
            <p>商品描述 2</p>
        </div>
        <div class="product-card">
            <img src="product3.jpg" alt="商品 3">
            <h3>商品 3</h3>
            <p>商品描述 3</p>
        </div>
    </div>
</body>

</html>

四、移动端页面实现弹性布局

viewport 设置：在移动端，需要设置 viewport 元标签，确保页面在不同设备上正确显示。例如：<meta name="viewport" content="width=device - width, initial - scale = 1.0">。
弹性布局适配：结合媒体查询和弹性布局，根据不同的屏幕尺寸调整布局。例如，在小屏幕上可以将弹性容器的 flex-direction 改为 column，实现垂直排列。

下面实现使用弹性布局实现商品图片和描述的排列。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
       .product-detail {
            display: flex;
            flex-direction: row;
        }

       .product-detail img {
            width: 50%;
            height: auto;
        }

       .product-detail .description {
            width: 50%;
            padding: 20px;
        }

        @media (max-width: 768px) {
           .product-detail {
                flex-direction: column;
            }

           .product-detail img,
           .product-detail .description {
                width: 100%;
            }
        }
    </style>
</head>

<body>
    <div class="product-detail">
        <img src="product.jpg" alt="商品图片">
        <div class="description">
            <h3>商品名称</h3>
            <p>商品描述</p>
        </div>
    </div>
</body>

</html>