html - 具有奇偶内容的 Flexbox 居中 div

Question

我正在尝试利用 flexbox 创建一个垂直对齐的图像，其内容在奇数和偶数的上方和下方。

不确定下面的示例发生了什么，但它不适用于 stackoverflow。

https://codepen.io/anon/pen/jgmMRy

            Box 2                   Box 3        

            text here               single line
            small text
.........   .........   .........   .........
.       .   .       .   .       .   .       .
.   X   .   .   X   .   .   X   .   .   X   .
.       .   .       .   .       .   .       .
.........   .........   .........   .........

Box 1                   Box 3        

text here               more long
for this                text here
box...                  something
                        like this
                        and this..

文字可能会有所不同，但我似乎无法弄清楚为什么这不起作用。我尝试了一些方法，但一直失败，图像需要垂直对齐，但内容一直在顶部浮动。

section {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.item {
  display: flex;
  flex-direction: column;
  position: relative;
  flex-basis: 0;
  flex-grow: 1;
  max-width: 100%;

  & > div {
    flex: 0 1 auto;
    align-self: auto;
  }

  &:nth-of-type(even) {
    .copy {
      order: 0;
    }
  }

  &:nth-of-type(odd) {
    .copy {
      order: 1;
    }
  }
}

<section>

  <div class="row">
    <div class="item">
      <div class="copy">
        <h2>heading</h2>
        <p>loremAnte ultricies tincidunt primis elit dapibus ipsum at rutrum euismod class, litora orci integer mi dictum et curabitur duis tortor, cum potenti ultrices platea est commodo ornare magna rhoncus.</p>
      </div>
      <div class="imageMain">
        <img src="https://via.placeholder.com/222x222" />
      </div>
    </div>
    <div class="item">
      <div class="copy">
        <h2>heading</h2>
        <p>loremAnte ultricies tincidunt primis elit dapibus ipsum at rutrum euismod class, litora orci integer mi dictum et curabitur duis tortor, cum potenti ultrices platea est commodo ornare magna rhoncus.</p>
      </div>
      <div class="imageMain">
        <img src="https://via.placeholder.com/222x222" />
      </div>
    </div>
    <div class="item">
      <div class="copy">
        <h2>heading</h2>
        <p>loremAnte ultricies tincidunt primis elit dapibus ipsum at rutrum euismod class, litora orci integer mi dictum et curabitur duis tortor, cum potenti ultrices platea est commodo ornare magna rhoncus.</p>
      </div>
      <div class="imageMain">
        <img src="https://via.placeholder.com/222x222" />
      </div>
    </div>
  </div>

</section>

标签： htmlcssflexbox

Answer 1

也许不是最好的代码，但我有这个给你：

https://codepen.io/benjaminbarbe10/pen/RXVorw

    <section>
  <div class="row1">
    <div class="item">
        loremAnte ultricies tincidunt primis elit dapibus ipsum at rutrum euismod class, litora orci integer mi dictum et curabitur duis tortor, cum potenti ultrices platea est commodo ornare magna rhoncus.
    </div>
  </div>
  <div class="row">
    <div class="item">
      <img src="https://via.placeholder.com/222x222" />
    </div>
    <div class="item">
       <img src="https://via.placeholder.com/222x222" />
    </div>
    <div class="item">
      <img src="https://via.placeholder.com/222x222" />
    </div>
  </div>
  <div class="row3">
    <div class="item">
      loremAnte ultricies tincidunt primis elit dapibus ipsum at rutrum euismod class, litora orci integer mi dictum et curabitur duis tortor, cum potenti ultrices platea est commodo ornare magna rhoncus.
    </div>

    <div class="item">
      loremAnte ultricies tincidunt primis elit dapibus ipsum at rutrum euismod class, litora orci integer mi dictum et curabitur duis tortor, cum potenti ultrices platea est commodo ornare magna rhoncus.
    </div>
  </div>
</section>

.row{
  display:flex;
}
.row1{
  display:flex;
  justify-content: center;

}
 .item{
    width: 33%;
    text-align: center;
   padding : 30px;
  }

.row3{
    display:flex;
    justify-content: space-between;
}

希望会有所帮助