无法停止使用 flexbox 拉伸元素

Posted 2023-03-25

【中文标题】无法停止使用 flexbox 拉伸元素

【英文标题】：can't stop stretching of the elements using flexbox

【发布时间】：2021-07-03 13:23:04

【问题描述】：

我想在 WordPress 网站中使用高级自定义字段在 3 列中显示推文，如下图所示

但问题是每 3 条推文的长度与它们中最高的一条推文一样长，这会造成不良外观

这就是我用来显示这些推文的代码

    <?php 
if ( is_admin() ) :
    simple_block( 'Twitter Showcase', null, '#824790' );
else : ?>
    <div class="block" data-block-type="twitter-showcase">
        <div class="container">
            <div class="row align-items-start">
                <?php
                    $count = count(get_field('tweets'));
                    while ( $count) : the_row();
                    $tweet = get_sub_field( 'tweet' );
                ?>
                <div class="col-4 mb-32">
                        <?php echo $count; ?>
                        <?php echo $tweet; ?>
                </div>
                <?php endwhile; ?>
            </div>
        </div>
    </div>
<?php endif;

我有一个想法来解决这个问题，或者如何通过 id 获取一行，这样我就可以制作三列并在这三列之间依次循环抛出推文

【参考方案1】：

我看不出问题出在哪里。你能更清楚地描述它吗？副手，听起来你需要使用 flexbox 或网格。

【参考方案2】：

我是通过 CSS 属性 column-count 实现的