html - 使用 flexbox 在主列中创建列

Question

我在 Bootstrap 3 中制作了下图。我正在为一个使用 BS3 的网站编程。不可能使用 BS4。

我对 BS3 的列高有很多问题，所以我现在放弃了。我上周开始使用 flexboxes，因为它似乎更容易使用。

是否可以使用 flexboxes 使设计在图像上更流畅？我用 flexboxes 制作了 2 个主列，但我不太确定如何在右侧主列中制作 2 个列。我试图在其中安装一些 Bootstrap ，但那完全错了。

.call-out-container {
        max-width: 1200px;
        margin: 40px auto 0 auto;
    }
    .call-out {
        padding: 20px;
        box-sizing: border-box;
        margin-bottom: 20px;
        flex-basis: 48%;
    }
    .call-out:nth-child(1) {background-color: pink}
    .call-out:nth-child(2) {background-color:rgb(41, 255, 201)}

    @media (min-width: 768px) {
        .call-out-container {
            display:flex;
            justify-content: space-between;
        }
    }

<div class="call-out-container">
    <div class="call-out">
        <h4>Headline 1</h4>
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa</p>
    </div>
    <div class="call-out">
        <h4>Headline 2</h4><hr/>
        
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium</p>
    </div>
</div>

Answer 1

为了使用 flexbox 创建右侧的设计，您需要:

<强>1。将您的两列包装到一个单独的 div 中。

   <div class="call-out">
            <h4>Headline 2</h4><hr/>
            <div class="two-column">
                <div class="column">
                    <img src="https://via.placeholder.com/250x150.png">
                    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium</p>
                </div>
                <div class="column">
                    <img src="https://via.placeholder.com/250x150.png">
                    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium</p>
                </div>

            </div>
        </div>

在这个例子中，我将两列包装到一个名为 two column 的 div 中

<强>2。显示 Flex 新创建的 div

.two-column{
    display: flex;
    flex-direction: row;
}

You can see the result here:

请注意:您必须添加一些调整/媒体查询来提供您想要的响应行为，但是这种方法应该可以让您轻松创建嵌套列布局。

有用的说明:请记住，您始终可以显示:flex 元素，这些元素是已经在使用 display: flex 的元素的子元素

希望对您有所帮助。