CSS实现弹性盒子均分布局

最新推荐文章于 2024-08-06 14:22:08 发布

• 口•

最新推荐文章于 2024-08-06 14:22:08 发布

阅读量1.5k

点赞数 2

分类专栏：前端三件套文章标签： css 前端 html

本文链接：https://blog.csdn.net/qq_62875177/article/details/128427673

版权

Flex布局 flex-grow flex-basis 响应式设计元素等分

关键词由CSDN通过智能技术生成

前端三件套专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、问题描述

如何不通过width：33.3333%去实现均分

二、解决方案

使用flex-grow(增长)、以及flex-basis(起跑线)或者flex(简写形式)去实现。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            width: 100%;
            height: 100vh;
            display: flex;
        }
        .part{
            flex-grow: 1;/*增长-->分配剩余空间，在这里每一个part分一份*/
            flex-basis: 0;/*起跑线-->防止盒内元素有内容后剩余空间改变*/
            /*flex: 1 0 0;值为增长、压缩、起跑线*/
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="part" style="background-color: red;">123</div>
        <div class="part" style="background-color: yellow;"></div>
        <div class="part" style="background-color: green;"></div>
    </div>
</body>
</html>