Flexbox centered div with odd and even content

Question

I am trying to utilise flexbox to create a vertical aligned images with content above and below on the odd and even.

Not sure whats happening with the example below but its not working on stackoverflow.

            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..

The text can vary but i cant seem to work out on why this is not working. I have tried a few methods but keep failing whereby the images need to be aligned vertically but the content keeps floating right at the top.

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>

The code you posted doesn't reproduce the problem you're describing. — Michael Benjamin, Jul 30 '19 at 22:13
@Michael_B - https://codepen.io/anon/pen/KOmgMd not sure why its not working on the above. — jagmitg, Jul 30 '19 at 22:18
Probably because you're using preprocessed code. Consider using plain CSS, so that everybody can access your work. — Michael Benjamin, Jul 30 '19 at 22:22
First thing, if you want the items lined up horizontally, add `display: flex` to `.row` ([codepen demo](https://codepen.io/anon/pen/jgmMRy)). — Michael Benjamin, Jul 30 '19 at 22:23
@Michael_B, thanks for that. I've updated the original answer. — jagmitg, Jul 30 '19 at 22:29
@Michael_B but it still goes back to the question, is there anyway to vertically align images? — jagmitg, Jul 30 '19 at 22:30

score -1 · Answer 1 · answered Jul 30 '19 at 22:41

Maybe not the best code but i have this for u :

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;
}

hope will help

edited to remove empty items – Benjamin Barbé Jul 30 '19 at 22:44 — Benjamin Barbé, Jul 30 '19 at 22:44

Flexbox centered div with odd and even content

1 Answers1