如何使用 Flexbox 制作 2 行/列的 Wordpress 布局？答案

【问题标题】：How do I make a 2 row/column Wordpress layout with Flexbox?如何使用 Flexbox 制作 2 行/列的 Wordpress 布局？
【发布时间】：2015-08-05 03:25:26
【问题描述】：

我正在尝试使用 flexbox 将具有 2 行网格布局的投资组合网站移植到 Wordpress，该网站以较小的分辨率包装成单列。布局类似于this portfolio site。

静态站点的代码如下所示

<div class="project-container">
  <div class="project-item">
    <h3 class="project-title">Project Title</h3>
    <a href="#">
      <img src="img/image-1500x1080.jpg">
    </a>
  </div>
  <div class="project-item">
    <h3 class="project-title">Project Title</h3>
    <a href="#">
      <img src="img/image-1500x1080.jpg">
    </a>
  </div>
</div>

我当前使用 Wordpress 循环的代码如下所示

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<?php endwhile; endif; ?>

<?php $args=array( 'post_type'=>'work' ); $query = new WP_QUERY( $args ); ?>

<div class="project-container">

  <?php if( $query->have_posts() ) : while( $query->have_posts() ) : $query->the_post(); ?>


  <div class="project-item">
    <h3 class="project-title"><?php the_title(); ?></h3>
    <a href="<?php the_permalink(); ?>">
      <?php the_post_thumbnail( ''); ?>
    </a>
  </div>


  <?php endwhile; endif; wp_reset_postdata; ?>

</div>

如何让循环显示 2 个不同的项目？

【问题讨论】：

标签： html flexbox wordpress

【解决方案1】：

有几种方法可以实现这一点。

1.) 将 2 个项目包装在一个列中
您可以通过实现一个计数器并检查以关闭和打开列元素来做到这一点。

2.) 通过 CSS 查看网格布局或查找所引用网站的源代码。

@media only screen and (min-width: 700px){
    section.projlist a:nth-child(even) {
        margin-left: 0.65em;
        margin-right: 0;
}
@media only screen and (min-width: 700px){
    section.projlist a:nth-child(even) {
        margin-left: 0.65em;
        margin-right: 0;
    }
}
@media only screen and (min-width: 700px){
    section.projlist a {
        width: calc(50% - 0.65em);
        max-width: none;
    }
}

【讨论】：

【解决方案2】：

您可能必须添加 css 来定义弹性框。代码应该给你一个想法。它看起来和你提到的例子很相似

.project-container {
  display: flex;
}
.project-item {
  margin: 0 20px;
  display: flex;
  flex-direction: column;
}
.project-item h3 {
  margin-bottom: -20px;
  z-index: 1;
}
.project-item img {}

<div class="project-container">
  <div class="project-item">
    <h3 class="project-title">Project Title</h3>
    <a href="#">
      <img src="http://lorempixel.com/400/200/sports/2/">
    </a>
  </div>
  <div class="project-item">
    <h3 class="project-title">Project Title</h3>
    <a href="#">
      <img src="http://lorempixel.com/400/200/sports/3/">
    </a>
  </div>
</div>

【讨论】：