html - Flex box 没有相互对齐-6ren

html - Flex box 没有相互对齐

转载作者：太空宇宙更新时间：2023-11-04 06:01:36

24

4

我有两行 flexbox。第一行有 3 个元素，每个元素占 4 列。第二行有2个元素，一个占4列，另一个占8列。但是当两行堆叠在一起时，每行的大小彼此不匹配。即每行的第一项具有不同的大小。

这是我的意思的图片: https://imgur.com/nOPJaNN

.flex-display {
    display: flex;
}
.pretty-container {
    background-color: rgb(38, 47, 53);
    margin: 5px;
    padding: 10px;
    position: relative;
}
.container {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 20px;
    box-sizing: border-box;
    background-color:rgb(54, 69, 79);
}
.four.columns { width: calc(100% / 3); }
.eight.columns { width: calc(100% / 3 * 2); }

body {
    font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
    line-height: 1.6;
    font-weight: 400;
    font-family: "Open Sans", "Helvetica Neue", "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #EBEBEB; }

<body>
    <div class="container">
        <div class="row flex-display" style="justify-content: space-between;">
            <div id="test4-container" class="pretty-container four columns">
                <div>
                    <div class="section-banner">Item 1</div>
                    <div id="test4"></div>
                </div>
            </div>
            <div id="test5-container" class="pretty-container eight columns">
                <div>
                    <div class="section-banner">Item 2</div>
                    <div id="test5"></div>
                </div>
            </div>
        </div>
        <div class="row flex-display" style="justify-content: space-between;">
            <div id="test1-container" class="pretty-container four columns">
                <div>
                    <div class="section-banner">Item 3</div>
                    <div id="test1"></div>
                </div>
            </div>
            <div id="test2-container" class="pretty-container four columns">
                <div>
                    <div class="section-banner">Item 4</div>
                    <div id="test2"></div>
                </div>
            </div>
            <div id="test3-container" class="pretty-container four columns">
                <div>
                    <div class="section-banner">Item 5</div>
                    <div id="test3"></div>
                </div>
            </div>
        </div>
    </div>
</body>

最佳答案

你在两者之间添加边距，所以当只有两个时，边距使用的空间减少 10px。你需要把这个额外的缺失添加到更大的盒子里。

flex-shrink, flex-grow 在这里没有任何帮助，flex-basis 也需要考虑计算那些 10px，flex 没有装订线系统；)。

.flex-display {
    display: flex;
}
.pretty-container {
    background-color: rgb(38, 47, 53);
    margin: 5px;
    padding: 10px;
    position: relative;
    box-sizing:border-box/* will include padding and border into calculation*/
}
.container {
    position: relative;
    width: 100%;
   
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 20px;
    box-sizing: border-box;
    background-color:rgb(54, 69, 79);
}
.four.columns { width: calc(100% / 3); }
.eight.columns { width: calc(100% / 3 * 2 + 10px) ;/* add those 10px margins missing and unseen by flex when this is meant not to take room from 2 boxes */}

body {
    font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
    line-height: 1.6;
    font-weight: 400;
    font-family: "Open Sans", "Helvetica Neue", "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #EBEBEB; }

<body>
    <div class="container">
        <div class="row flex-display" style="justify-content: space-between;">
            <div id="test4-container" class="pretty-container four columns">
                <div>
                    <div class="section-banner">Item 1</div>
                    <div id="test4"></div>
                </div>
            </div>
            <div id="test5-container" class="pretty-container eight columns">
                <div>
                    <div class="section-banner">Item 2</div>
                    <div id="test5"></div>
                </div>
            </div>
        </div>
        <div class="row flex-display" style="justify-content: space-between;">
            <div id="test1-container" class="pretty-container four columns">
                <div>
                    <div class="section-banner">Item 3</div>
                    <div id="test1"></div>
                </div>
            </div>
            <div id="test2-container" class="pretty-container four columns">
                <div>
                    <div class="section-banner">Item 4</div>
                    <div id="test2"></div>
                </div>
            </div>
            <div id="test3-container" class="pretty-container four columns">
                <div>
                    <div class="section-banner">Item 5</div>
                    <div id="test3"></div>
                </div>
            </div>
        </div>
    </div>
</body>

关于html - Flex box 没有相互对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57243847/

24

4

0

文章推荐： c - 如何从组合框 GTK C 代码中删除所有项目？

文章推荐：位串的字符数组

文章推荐： python - 更新记分员

rust - 有什么方法可以将 Box> 转换为 Box> 吗？
考虑这样的代码: trait Foo { fn foo(&self); } fn consume_func(b: Box>) { unimplemented!(); } fn prod
rust - 有什么方法可以将 Box> 转换为 Box> 吗？
考虑这样的代码: trait Foo { fn foo(&self); } fn consume_func(b: Box>) { unimplemented!(); } fn prod
rust - 我是否需要对 Boxed 结构的 Box 子结构进行 Box 处理才能将所有内容都放在堆上？
我不明白在 Rust 中，当我们 Box 父结构时，结构中的结构发生了什么。 struct Outer1 { child: Inner1, } struct Inner1 { n: i
css - * { 盒子尺寸 : border-box; } : To border-box or not to border-box all elements?
我将开始开发一个新网站，并准备处理浏览器用于计算元素宽度和高度的不同方法 (box model stuff)。不知何故，我想到了:如果我只是将 box-sizing 应用于网站中的所有元素会怎么样？
box - 由于网络错误而无法连接到 Box API？
在 java 应用程序中使用 box java sdk 访问 box api 时，我遇到了下面提到的错误。请指出此问题的原因。 Exception in thread "main" com.box.s
css - box-sizing - 'outline' 在 'border-box' 或 'content-box' 中计算？
计算盒子的宽高时，outline width like outline: 5px dashed red; 如果 box-sizing:border-box，框的宽度/高度是否会考虑轮廓？最佳答案我
rust - 如果 Box 不是 Box 的子类型，其中 B : A?，这意味着 Box 是协变的是什么意思
读完the subtyping chapter of the Nomicon ，我无法理解类型参数的协方差。特别是对于 Box类型，描述为:T is covariant . 但是，如果我写这段代码:
rust - 为什么 &'a Box treated as &' a Box and not &' a Box？
给定这段代码: trait Trait {} struct Child; impl Trait for Child {} struct Father { child: &'a Box, } i
box-api - box.com 有可用的文件选择器吗？
与文件 chooser for dropbox 类似，box.com 有没有？最佳答案 Box 目前不维护自己的“文件选择器”；然而，有一个很棒的服务叫做 filepicker.io，它充当几乎所有
box-api - Box API 返回的流位置不能用于跟踪事件
感谢您对我的问题的回复:Is this a bug of Box API v2 when getting events 这是一个与此相关的新问题。问题是我不能可靠地使用从以前的调用中获得的 next_
box-api - 在 Box 请求中使用用户身份
我试图让 Box Enterprise API 使用 As-User 工作。我有一个管理员帐户，我用它来尝试检索子帐户中的内容。我首先使用管理员帐户检索子帐户的用户ID。并将用户 ID 添加为字段“
box-api - 有没有办法从 Box 帐户热链接图像
我想在一个简单的导轨中本地查看我的 Box 帐户中的图像 app .目标是使用这些图像进行幻灯片放映。我寻找必要的参数来传递每个图像相关 url成标签。看来我只能下载图像，或从 Box 应用程序中查看
casting - 为什么我不能将具有扩展特征的 Box 转换到具有基本特征的 Box？
这个问题在这里已经有了答案: Why doesn't Rust support trait object upcasting? (5 个答案) 关闭 4 年前。给定代码 trait Base {
python - 提供了断言错误 : The algorithm only supports as action spaces but Box(-1. 0, 1.0, (3,), float32)
所以基本上我尝试从https://github.com/Gor-Ren/gym-jsbsim转换这个自定义健身房环境。使用farama基金会的gymnasium api。这是我正在处理的存储库:htt
box-api - BOX v2 API，用于覆盖文件或在尝试上传之前检查文件是否存在
我是BOX API的新手，因此正在使用API的v2。我正在从我的应用程序本地进行REST调用。我想上传一个以前可能上传或未上传的文件。我知道父文件夹ID和文件名。我需要覆盖现有文件，或者至少要再
box-api - 如何在没有 Box 授权页面的情况下获取访问 token
我已被授予访问(协作)文件夹的权限。我需要的是每天访问该文件夹并从中获取文件。现在我生成的开发者 token 将在 1 小时后过期。有什么办法可以得到authorization code没有第一站，它
box-api - 来自 box.com 的文件列表
我正在尝试将 Box 中上传的文件与另一个外部系统同步。我使用哪些 API 来获取“在给定 dd/mm/yy hh:mm:ss 后上传/更新的所有文件的列表”？干杯! 最佳答案我认为User Ev
Vagrant "box"与 "base box"，有区别吗？
Vagrant 文档和 CLI 使用术语“box”和“base box”。命名意味着基本框是一种特定类型的框，但是，这些术语似乎被用作同义词。 Vagrant“盒子”和 Vagrant“基础盒子”之间
box-api - 您可以使用 box API 获取文件夹的标签吗？
Box 允许您为文件夹创建标签，但如何从 API 中获取该信息？我在 GET /folders/{id} API 中没有看到标签返回.标签也不被视为元数据。最佳答案如果你看看 Fields wri
box-api - Box v1 api 何时停止运行？
我正在尝试确定应该使用哪个版本的 Box api。我的决定取决于 v1 api 的 EOL 时间线。我不想完成我的应用程序，就在应用程序发布之前(或之后不久)，v1 api 停止工作。我很乐意使用

首页

博学

6Ren·AI

商城

html - Flex box 没有相互对齐