Flex-Flow Column Wrap - 带有标题的图标

Posted 2023-03-25

【中文标题】Flex-Flow Column Wrap - 带有标题的图标

【英文标题】：Flex-Flow Column Wrap - Icon with Header

【发布时间】：2021-10-02 09:06:37

【问题描述】：

我正在尝试使用高级自定义字段和硬代码重新创建设计。我正在使用 flex-box 作为 CSS，并希望在文本上方有一个 6 列行的图标。

目前，我的代码将图标放在左侧，文本放在旁边，而不是将其作为一列然后一行读取。

感谢您的帮助:)...

<div class="wrapper">
<section id="process">
<?php if ( have_rows( 'procces' ) ) : ?>
    <?php while ( have_rows( 'procces' ) ) : the_row(); ?>
        <h1><?php the_sub_field( 'process_header' ); ?></h1>
        <p><?php the_sub_field( 'process_description' ); ?><p>
        <?php if ( have_rows( 'icon' ) ) : ?>
            <?php while ( have_rows( 'icon' ) ) : the_row(); ?>
            <div id="process-icon" class="icon-item">
                <?php $icon_image = get_sub_field( 'icon_image' ); ?>
                <?php if ( $icon_image ) : ?>
                    <img src="<?php echo esc_url( $icon_image['url'] ); ?>"  />
                <?php endif; ?>
                <h2><?php the_sub_field( 'icon_description' ); ?></h2>
            <?php endwhile; ?>
        <?php else : ?>
            <?php // no rows found ?>
        <?php endif; ?>
        </div>
    <?php endwhile; ?>
<?php endif; ?>
</section>
</div>

.icon-item 
    display:flex;
    flex-flow: column row;

【问题讨论】：

您好，欢迎来到 SO。您能否提供一个当前输出和您想要的输出的示例。很难从多个 while 循环中读取它。谢谢

这个链接是我想要得到的图像bybec.ca/gfx/Screen%20Shot%202021-07-26%20at%207.26.50%20AM.png这个链接是我根据上面的代码得到的图像bybec.ca/gfx/Screen%20Shot%202021-07-26%20at%207.25.24%20AM.png

【参考方案1】：

Flex 将作用于具有该属性的项目的直接子项，因此您只需将所有 .icon-item 包装到 .icon-wrapper 中并对其应用 flex：

<?php if ( have_rows( 'icon' ) ) : ?>
  <div class="icon-wrapper">
  <?php while ( have_rows( 'icon' ) ) : the_row(); ?>
    <div class="icon-item">
    <?php $icon_image = get_sub_field( 'icon_image' ); ?>
      <?php if ( $icon_image ) : ?>
         <img src="<?php echo esc_url( $icon_image['url'] ); ?>"  />
    <?php endif; ?>
    <h2><?php the_sub_field( 'icon_description' ); ?></h2>
    </div><!-- close .icon-item-->
  <?php endwhile; ?>
  </div><!--- close .icon-wrapper-->
<?php else : ?>
  <?php // no rows found ?>
<?php endif; ?>

我也会在任何多个项目上删除 id="process-icon"。对单个元素使用多个 & id 的类（我通常只使用 javascript 引用的 ID）

那么你的 css 将是：

.icon-wrapper  
  display: flex;


.icon-item