时间戳

首页 > 解决方案 > 不使用百分比水平分布 3 列容器的内部 Div？- 柔性

html - 不使用百分比水平分布 3 列容器的内部 Div？- 柔性

问题描述

我想知道是否有更好的方法可以使用 flex 在父 div（水平）内均匀地分隔三个 div。这是我所拥有的：

.container {
    display: flex;
}
.left-div, .middle-div, .right-div {
    display: flex;
    justify-content: center;
    width: 33.3%;
}
<!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>Demo</title>
</head>
<body>
    <div class="container">
        <div class="left-div">
            Left
        </div>
        <div class="middle-div">
            Middle
        </div>
        <div class="right-div">
            Right
        </div>
    </div>
</body>
</html>

如您所见，我将每个 child-div / column 设置为width: 33.3%- 是否有一个 CSS 属性会自动强制它们跨越其父级的 100% 宽度，而不使用百分比？

如果我摆脱width: 33%，我会得到这个：

.container {
        display: flex;
}
.left-div, .middle-div, .right-div {
        display: flex; 
        justify-content: center;
        /*width: 33.3%;*/
}
<!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>Demo</title>
</head>
<body>
    <div class="container">
        <div class="left-div">
            Left
        </div>
        <div class="middle-div">
            Middle
        </div>
        <div class="right-div">
            Right
        </div>
    </div>
</body>
</html>

我也尝试将父 div 设置为justify-content: space-between;，但现在这会强制内部 div 的内容与左对齐（对于左 div）或右对齐（对于右 div）：

.container {
        display: flex;
        justify-content: space-between;
}
.left-div, .middle-div, .right-div {
        display: flex; 
        justify-content: center;
        /*width: 33.3%;*/
}
<!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>Demo</title>
</head>
<body>
    <div class="container">
        <div class="left-div">
            Left
        </div>
        <div class="middle-div">
            Middle
        </div>
        <div class="right-div">
            Right
        </div>
    </div>
</body>
</html>

我知道将每个子 div 设置为width: 33%有效，但有更好的方法吗？例如，如果我想要 7 列，就不必计算百分比？

标签： htmlcssflexbox

解决方案

flex-grow可能是你需要的。

CSS 属性设置弹性项目主要尺寸的flex-grow弹性增长因子。它指定应该将弹性容器中的剩余空间分配给项目（弹性增长因子）。

.container {
    display: flex;
}
.left-div, .middle-div, .right-div {
    display: flex;
    justify-content: center;
    flex-grow:1;
}
<!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>Demo</title>
</head>
<body>
    <div class="container">
        <div class="left-div">
            Left
        </div>
        <div class="middle-div">
            Middle
        </div>
        <div class="right-div">
            Right
        </div>
    </div>
</body>
</html>

推荐阅读