如何让嵌套在 flexbox 中的 CSS 网格中的文本首先换行？答案

【问题标题】：How to get text in a CSS grid nested in a flexbox to wrap first?如何让嵌套在 flexbox 中的 CSS 网格中的文本首先换行？
【发布时间】：2022-01-04 19:01:00
【问题描述】：

TL;DR：这是CodePen。

我有一个带有图像和带有长线的文本网格的 UI，如下所示：

我正在使用带有两个元素的 CSS Flexbox：图像和文本。然后为了布置文本，我使用了 CSS Grid。现在，当我在移动设备的窄屏幕上查看它时，它正确地包装了所有内容并堆叠了两个元素：

但在桌面上，div 稍微窄一些，弹性框会在网格文本之前换行，如下所示：

在这种情况下，如何在不使用弹性框的情况下让文本换行？我担心我可能需要使用一些媒体查询，但我什至不确定我是否为此使用了正确的 CSS 组件。

代码如下：

index.html：

<div class="media-callout">
    <div class="media-thumb">
        <img height="170" width="120">
    </div>
    <div class="media-callout-grid">
        <div class="media-callout-key">Authors</div>
        <div>Babalola, J &amp; Ogunkola, Babalola</div>

        <div class="media-callout-key">Year</div>
        <div>2013</div>

        <div class="media-callout-key">Title</div>
        <div class="media-callout-value"><a href="https://www.mcser.org/index.php/37-archive/jesr-archive/jesr-2013/615-jesr-vol-3-no-1-january-2013-2">Scientific Literacy: Conceptual Overview, Importance and Strategies for Improvement</a></div>

        <div class="media-callout-key">Journal</div>
        <div><em>Journal of Educational and Social Research</em></div>

        <div class="media-callout-key">Location</div>
        <div>vol. 3, no. 1, pp. 265–274</div>

        <div class="media-callout-key">DOI</div>
        <div><a href="https://doi.org/10.5901/jesr.2013.v3n1p265" target="_blank">10.5901/jesr.2013.v3n1p265</a></div>

    </div>
</div>

style.css：

.media-callout {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 20px;
    column-gap: 10px;

    padding: 1em;
    max-width: max-content;
}
.media-thumb img {
    float: left;
    height: 175px;
    width: auto;
}

.media-callout-grid {
    display: grid;
    font-size: 12pt;
    grid-template-columns: 6em 1fr;
    align-content: center;
    gap: 0 15px;
}
.media-callout-key {
    text-align: right;
    font-weight: bold;
}

.media-callout-value {
    word-break: break-word;
    word-wrap: break-all;
}

【问题讨论】：

标签： flexbox css-grid word-wrap

【解决方案1】：

媒体查询确实解决了这个问题：

@media screen and (min-width: 600px) {
    .media-callout {
        flex-wrap: nowrap;
    }
}

查询必须在.media-callout 块之后。我还必须使用this approach 来防止图像被压扁。

【讨论】：