Html 引导程序4-创建居中和等宽的灵活项目

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

我的目标是创建三行（为了简单起见，我附加的代码只有一行），每行有两个相同宽度的框。一个框有图片，另一个框有文本。我还希望这些盒子能够响应，这样当屏幕很小时，盒子就可以堆叠在一起（1乘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>

简介：Lorem ipsum dolor sit amet，Concetetur Adipsicing Elite。Sed-ac-rhoncus扫描电镜。连续前庭
阿库东部，在马莱苏亚达·多洛·波苏尔。这是我的最爱。威尼斯乌尔里西斯酒店。不结盟运动
努克·内克，维塔拍卖人塞德，朗卡斯·奎斯·埃尼姆。母亲坐在床上，母亲坐在床上，母亲坐在床上
舌苔。我是阿库。我坐在那里。这是我的荣幸。中间前庭
Elite，我不知道该怎么做。在vel sapien felis

我的问题是，图像变得非常小且向左，而文本占据了行上的大部分空间。我尝试过使用flex生长/收缩和flex填充，但没有任何改变。有什么建议吗（如果没有太多问题的话，还有响应能力）？

你可以这样做

如果需要三行，则需要使用

display:flex以及
弹性方向：列如果使用3个项目，它们将竖立，第一个项目位于顶部，第二个项目位于后面，第三个项目位于底部。如果你想让它变得更复杂，你可以多堆叠3个flex框，然后从那里组织信息，而不是堆叠3个元素

看看这个
如果有帮助，请告诉我

我每次使用CSS时都会用到这张纸，这是一个救命稻草

.parent{
显示器：flex；
边框：实心1px；
}
.孩子{
弹性：1；
}

使用Flex
简介：Lorem ipsum dolor sit amet，Concetetur Adipsicing Elite。Sed-ac-rhoncus扫描电镜。连续前庭
阿库东部，在马莱苏亚达·多洛·波苏尔。这是我的最爱。威尼斯乌尔里西斯酒店。不结盟运动
努克·内克，维塔拍卖人塞德，朗卡斯·奎斯·埃尼姆。母亲坐在床上，母亲坐在床上，母亲坐在床上
舌苔。我是阿库。我坐在那里。这是我的荣幸。中间前庭
Elite，我不知道该怎么做。在vel sapien felis
第2行

第3行

使用网格
简介：Lorem ipsum dolor sit amet，Concetetur Adipsicing Elite。Sed-ac-rhoncus扫描电镜。连续前庭
阿库东部，在马莱苏亚达·多洛·波苏尔。这是我的最爱。威尼斯乌尔里西斯酒店。不结盟运动
努克·内克，维塔拍卖人塞德，朗卡斯·奎斯·埃尼姆。母亲坐在床上，母亲坐在床上，母亲坐在床上
舌苔。我是阿库。我坐在那里。这是我的荣幸。中间前庭
Elite，我不知道该怎么做。在vel sapien felis
第2行

第3行

也许您可以在我们开始使用切线之前向我们展示哪些地方不起作用。A是必需的。正如我在代码之后所说的，我尝试在行中的两个flex项上使用flex grow。在这种情况下，它并没有固定它们的宽度。根据我的经验，我发现引导网格是一个更好的解决方案。尽管.flex-fill声明宽度相等的项，但它恰好依赖于flex项的内容。所以用flex做不到这一点？可能是通过向css类添加flex属性。下面我发布了一个代码片段，我认为问题不在于创建行。它是关于一行中的项目。每行有两个内容不同的弹性项。flexbox似乎可以根据flex项目的内容大小自动分配宽度。使用flex-fill也无济于事。有什么建议吗？您可以为flex儿童声明宽度。也可以使用“包裹”选项