Question

我正在尝试实现和砌体一样只使用flexbox布局。

我认为我需要使用列和行的混合，但我无法实现的是，元素将在彼此下方和上方具有相同的距离（如堆叠），以及第一排不会对齐第一排......是否有可能在没有js的情况下实现它？非常感谢

**

更新：

**

我设法在第二排拉出中间和右侧列，所以它只是需要与中间列对齐的第二个元素....所以我猜js并没有真正结束

http://codepen.io/HendrikEng/pen/PpzYqM?editors=1100

这应该是它的样子：

HTML

<section>
  <div class="c-team-tiles">
    <div class="c-team-row">
      <figure class="c-team-tile">
        <div class="u-margin-bottom c-team-tile__img">
          <img src="http://placehold.it/390x590" alt="">
        </div>
        <figcaption class="c-image-tile__cpt">
          <h4 class="u-margin-bottom-tiny">Name</h4>
          <p class="u-margin-bottom-tiny">Position</p>
        </figcaption>
      </figure>
      <figure class="c-team-tile">
        <div class="u-margin-bottom c-team-tile__img">
          <img src="http://placehold.it/590x390" alt="">
        </div>
        <figcaption class="c-image-tile__cpt">
          <h4 class="u-margin-bottom-tiny">Name</h4>
          <p class="u-margin-bottom-tiny">Position</p>
        </figcaption>
      </figure>
    </div>
    <div class="c-team-row">
      <div class="c-team-column">
        <figure class="c-team-tile">
          <div class="u-margin-bottom c-team-tile__img">
            <img src="http://placehold.it/390x330" alt="">
          </div>
          <figcaption class="c-image-tile__cpt">
            <h4 class="u-margin-bottom-tiny">Name</h4>
            <p class="u-margin-bottom-tiny">Position</p>
          </figcaption>
        </figure>
        <figure class="c-team-tile">
          <div class="u-margin-bottom c-team-tile__img">
            <img src="http://placehold.it/390x590" alt="">
          </div>
          <figcaption class="c-image-tile__cpt">
            <h4 class="u-margin-bottom-tiny">Name</h4>
            <p class="u-margin-bottom-tiny">Position</p>
          </figcaption>
        </figure>
        <figure class="c-team-tile">
          <div class="u-margin-bottom c-team-tile__img">
            <img src="http://placehold.it/390x590" alt="">
          </div>
          <figcaption class="c-image-tile__cpt">
            <h4 class="u-margin-bottom-tiny">Name</h4>
            <p class="u-margin-bottom-tiny">Position</p>
          </figcaption>
        </figure>
        <figure class="c-team-tile">
          <div class="u-margin-bottom c-team-tile__img">
            <img src="http://placehold.it/390x590" alt="">
          </div>
          <figcaption class="c-image-tile__cpt">
            <h4 class="u-margin-bottom-tiny">Name</h4>
            <p class="u-margin-bottom-tiny">Position</p>
          </figcaption>
        </figure>

      </div>
      <div class="c-team-column">
        <figure class="c-team-tile">
          <div class="u-margin-bottom c-team-tile__img">
            <img src="http://placehold.it/390x590" alt="">
          </div>
          <figcaption class="c-image-tile__cpt">
            <h4 class="u-margin-bottom-tiny">Name</h4>
            <p class="u-margin-bottom-tiny">Position</p>
          </figcaption>
        </figure>
        <figure class="c-team-tile">
          <div class="u-margin-bottom c-team-tile__img">
            <img src="http://placehold.it/390x330" alt="">
          </div>
          <figcaption class="c-image-tile__cpt">
            <h4 class="u-margin-bottom-tiny">Name</h4>
            <p class="u-margin-bottom-tiny">Position</p>
          </figcaption>
        </figure>
        <figure class="c-team-tile">
          <div class="u-margin-bottom c-team-tile__img">
            <img src="http://placehold.it/390x420" alt="">
          </div>
          <figcaption class="c-image-tile__cpt">
            <h4 class="u-margin-bottom-tiny">Name</h4>
            <p class="u-margin-bottom-tiny">Position</p>
          </figcaption>
        </figure>
        <figure class="c-team-tile">
          <div class="u-margin-bottom c-team-tile__img">
            <img src="http://placehold.it/390x330" alt="">
          </div>
          <figcaption class="c-image-tile__cpt">
            <h4 class="u-margin-bottom-tiny">Name</h4>
            <p class="u-margin-bottom-tiny">Position</p>
          </figcaption>
        </figure>
        <figure class="c-team-tile">
          <div class="u-margin-bottom c-team-tile__img">
            <img src="http://placehold.it/390x330" alt="">
          </div>
          <figcaption class="c-image-tile__cpt">
            <h4 class="u-margin-bottom-tiny">Name</h4>
            <p class="u-margin-bottom-tiny">Position</p>
          </figcaption>
        </figure>
      </div>
      <div class="c-team-column">
        <figure class="c-team-tile">
          <div class="u-margin-bottom c-team-tile__img">
            <img src="http://placehold.it/390x450" alt="">
          </div>
          <figcaption class="c-image-tile__cpt">
            <h4 class="u-margin-bottom-tiny">Name</h4>
            <p class="u-margin-bottom-tiny">Position</p>
          </figcaption>
        </figure>
        <figure class="c-team-tile">
          <div class="u-margin-bottom c-team-tile__img">
            <img src="http://placehold.it/390x330" alt="">
          </div>
          <figcaption class="c-image-tile__cpt">
            <h4 class="u-margin-bottom-tiny">Name</h4>
            <p class="u-margin-bottom-tiny">Position</p>
          </figcaption>
        </figure>
        <figure class="c-team-tile">
          <div class="u-margin-bottom c-team-tile__img">
            <img src="http://placehold.it/390x590" alt="">
          </div>
          <figcaption class="c-image-tile__cpt">
            <h4 class="u-margin-bottom-tiny">Name</h4>
            <p class="u-margin-bottom-tiny">Position</p>
          </figcaption>
        </figure>
        <figure class="c-team-tile">
          <div class="u-margin-bottom c-team-tile__img">
            <img src="http://placehold.it/390x330" alt="">
          </div>
          <figcaption class="c-image-tile__cpt">
            <h4 class="u-margin-bottom-tiny">Name</h4>
            <p class="u-margin-bottom-tiny">Position</p>
          </figcaption>
        </figure>
        <figure class="c-team-tile">
          <div class="u-margin-bottom c-team-tile__img">
            <img src="http://placehold.it/390x450" alt="">
          </div>
          <figcaption class="c-image-tile__cpt">
            <h4 class="u-margin-bottom-tiny">Name</h4>
            <p class="u-margin-bottom-tiny">Position</p>
          </figcaption>
        </figure>
      </div>

    </div>
  </div>
</section>

CSS

* {
  margin: 0;
  padding: 0;
}

.c-team-row {
  align-content: stretch;
  align-items: stretch;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

.c-team-coumn {
  align-content: stretch;
  align-items: stretch;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
}

.c-team-tile {
  align-self: auto;
  flex: 0 1 auto;
  order: 0;
}

使用flexbox

0 个答案: