Bootstrap 4 - 创建居中和等宽的弹性项目答案

【问题标题】：Bootstrap 4 - Creating centered and equal width flex itemsBootstrap 4 - 创建居中和等宽的弹性项目
【发布时间】：2020-01-31 21:10:53
【问题描述】：

我还是新手。根据我在布局方面的了解，您可以选择两个主要选项：flex 或 grid。我目前正在尝试使用 flexbox 方法，但是我遇到了宽度问题。

我的目标是创建三行（为简单起见，我附上的代码只有 1 行），每行有两个等宽的框。一个框有图片，另一个框有文字。我还希望这些框具有响应性，以便当屏幕很小时，这些框彼此堆叠（1 x 1）。我对响应部分的唯一猜测是我使用 d-md-flex。这是我目前所拥有的：

        <!--Row 1-->
        <div class="d-flex flex-column mb-3 text-white">
            <div class="d-flex flex-row justify-content-between align-items-center">
                <div class="text-center"><img src="Photos/2019 SB Photos/Whole_Stadium.JPG" class="img-fluid w-100" alt="Responsive image"></div>
                <div class="text-center"><p class="m-0">INTRODUCTION: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac rhoncus sem. Vestibulum consectetur
                    arcu est, at malesuada dolor posuere in. Cras tincidunt est eget ullamcorper mattis. Sed interdum ultricies venenatis. Nam
                    nunc neque, imperdiet vitae auctor sed, rhoncus quis enim. Maecenas sit amet purus aliquet, gravida purus sit amet, maximus
                    ligula. Praesent ut enim arcu. Nunc sit amet orci velit. Sed blandit consectetur suscipit. Vestibulum interdum pharetra
                    elit, nec pharetra arcu pretium quis. In vel sapien felis.</p></div>
            </div>

我的问题是图像变得非常小并且在左侧，而文本占据了行上的大部分空间。我尝试过使用 flex-grow/shrink 和 flex-fill，但没有任何改变。有什么建议（如果要求不高的话，还有响应能力）？

【问题讨论】：

也许你可以在我们开始切线之前向我们展示没有的工作。 minimal reproducible example 是必需的。
就像我在代码之后所说的那样，我尝试在行内的两个 flex 项目上使用 flex-grow。它没有固定它们的宽度
在这样的场景中，根据我的经验，我发现引导网格是一个更好的解决方案。尽管 .flex-fill 声明等宽项，但它恰好取决于 flex 项的内容。
那么有没有办法用 flex 做到这一点？
可能是通过将 flex 属性添加到您的 css 类。下面我贴了一个代码sn-p

标签： html css bootstrap-4 flexbox

【解决方案1】：

你可以这样做。

如果你想要三行，你需要使用display: flex; 以及flex-direction: column; 如果你使用3个项目，他们会站起来，第一个在上面，第二个在后面，第三个在下面。如果你想让它变得更复杂，而不是堆叠 3 个元素，你可以再堆叠 3 个弹性框，然后从那里组织信息。

看看这个 https://www.steveaolsen.com/docs/FlexboxCheatsheet.pdf 让我知道这是否有帮助！

我每次在 CSS 中工作时都会使用这张表，它是一个救生员

【讨论】：

我认为问题不在于创建行。它关于连续的项目。每行有两个内容不同的弹性项目。而且 flexbox 似乎会根据 flex 项的内容大小自动分配宽度。使用 flex-fill 也无济于事。有什么建议吗？
您可以为 flex 子项声明宽度。您还可以使用换行选项。你也可以在弹性项目中使用浮动。 OP 给我们完整的代码，我们会弄明白的
是的，同意，我已经在我们的 css 类中使用 flex with 发布了类似的内容，这意味着没有可以直接在 div 上使用的直接 flexbox css 类（如网格中的 col-*）在这种情况下！？

【解决方案2】：

            .parent {
            display : flex;
            border  : solid 1px;
            }

            .child {
            flex : 1;
            }

            <head>
                  <meta name="viewport" content="width=device-width, initial-scale=1">
                  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
                  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
                  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
                  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
                </head>
                <div>Using Flex</div>
                            <div class="parent">
                                <div class="child bg-info"><img src="Photos/2019 SB Photos/Whole_Stadium.JPG" alt="Responsive image"></div>
                                <div class="child bg-warning"><p class="m-0">INTRODUCTION: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac rhoncus sem. Vestibulum consectetur
                                    arcu est, at malesuada dolor posuere in. Cras tincidunt est eget ullamcorper mattis. Sed interdum ultricies venenatis. Nam
                                    nunc neque, imperdiet vitae auctor sed, rhoncus quis enim. Maecenas sit amet purus aliquet, gravida purus sit amet, maximus
                                    ligula. Praesent ut enim arcu. Nunc sit amet orci velit. Sed blandit consectetur suscipit. Vestibulum interdum pharetra
                                    elit, nec pharetra arcu pretium quis. In vel sapien felis.</p>
                                    </div>
                            </div>
                            <div class="parent">
                                <div class="child bg-info"><img src="Photos/2019 SB Photos/Whole_Stadium.JPG" alt="Responsive image"></div>
                                <div class="child bg-warning"><p class="m-0">Row 2</p>
                                    </div>
                            </div>
                            <div class="parent">
                                <div class="child bg-info"><img src="Photos/2019 SB Photos/Whole_Stadium.JPG" alt="Responsive image"></div>
                                <div class="child bg-warning"><p class="m-0">Row 3</p>
                                    </div>
                            </div>
                            
                            <div>Using Grid</div>
                                                <div class="row border border-dark">
                                <div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6 bg-info"><img src="Photos/2019 SB Photos/Whole_Stadium.JPG" alt="Responsive image"></div>
                                <div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6 bg-warning"><p class="m-0">INTRODUCTION: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac rhoncus sem. Vestibulum consectetur
                                    arcu est, at malesuada dolor posuere in. Cras tincidunt est eget ullamcorper mattis. Sed interdum ultricies venenatis. Nam
                                    nunc neque, imperdiet vitae auctor sed, rhoncus quis enim. Maecenas sit amet purus aliquet, gravida purus sit amet, maximus
                                    ligula. Praesent ut enim arcu. Nunc sit amet orci velit. Sed blandit consectetur suscipit. Vestibulum interdum pharetra
                                    elit, nec pharetra arcu pretium quis. In vel sapien felis.</p>
                                    </div>
                            </div>
                            <div class="row border border-dark">
                                <div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6 bg-info"><img src="Photos/2019 SB Photos/Whole_Stadium.JPG" alt="Responsive image"></div>
                                <div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6 bg-warning"><p class="m-0">Row 2</p>
                                    </div>
                            </div>
                            <div class="row border border-dark">
                                <div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6 bg-info"><img src="Photos/2019 SB Photos/Whole_Stadium.JPG" alt="Responsive image"></div>
                                <div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6 bg-warning"><p class="m-0">Row 3</p>
                                    </div>
                            </div>

【讨论】：

好的，这很完美。是否可以使用引导程序来做到这一点？
如果有兴趣可以尝试引导网格。
更新了代码 sn-p 以展示如何使用 flex 功能和引导网格。希望有帮助