Flex direction row alignment next to another flexbox container

Question

I am trying to mix flex direction column and row, do I need these to be in separate divs?

Here is an example of what we are looking at

.container {
  display: flex;
}

.container .left {
  display: flex;
  align-items: center;
  flex: 1;
}

.container .left img {
  border-radius: 50%;
  margin-right: 10px;
}

.container .right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
}

<div class="container">
  <div class="left">
    <img src="https://via.placeholder.com/150">
    <div class="left-text">
      <p>Text Text</p>
      <p>Text Text</p>
    </div>
  </div>
  <div class="right">
    <div class="right-icons">
      <img src="https://via.placeholder.com/20">
      <img src="https://via.placeholder.com/20">
    </div>
    <p>More Text</p>
    <img src="https://via.placeholder.com/20">
  </div>
</div>

I was thinking originally I could do this within the same div but i'm not sure if that is possible ?

score 0 · Answer 1 · answered Nov 15 '19 at 01:37

Just add one more level to your right-icons and use flex.

.container {
  display: flex;
}

.container .left {
  display: flex;
  align-items: center;
  flex: 1;
}

.container .left img {
  border-radius: 50%;
  margin-right: 10px;
}

.container .right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
}

.icon {
  display: flex;
  align-items: center;
  margin-right: 10px;
}

.right .right-icons {
  display: flex;
}

p {
  margin: 0;
}

<div class="container">
  <div class="left">
    <img src="https://via.placeholder.com/150">
    <div class="left-text">
      <p>Text Text</p>
      <p>Text Text</p>
    </div>
  </div>
  <div class="right">
    <div class="right-icons">
      <div class="icon">
        <img src="https://via.placeholder.com/20"> 21
      </div>
      <div class="icon">
        <img src="https://via.placeholder.com/20"> 22
      </div>
      <p>More Text</p>
    </div>
    <img src="https://via.placeholder.com/20">
  </div>
</div>

Michael Benjamin · Answer 2 · 2019-11-15T03:37:37.533

This version of your layout is a bit more complex than your original version.

For greater flexibility in placing and aligning your components, I would suggest using CSS grid layout instead of flexbox.

Here's a demo (including HTML5 semantic mark-up):

article {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(4, 1fr);
  height: 200px; /* for demo only */
  align-items: center;
  
  grid-template-areas:  " figure   .      .    .    . . . . .    .       .    .  "
                        " figure name  name  name   . . . .  duration alert date . "
                        " figure title title title  . . . .     .      .    favorite . "
                        " figure   .      .    .    . . . .     .      .       .   . ";
}

figure     { grid-area: figure; }
.name      { grid-area: name; }
.title     { grid-area: title; }
.duration  { grid-area: duration; }
.alert     { grid-area: alert; }
.date      { grid-area: date; white-space: nowrap; text-align: right; }
.favorite  { grid-area: favorite; text-align: right; }

<article>
  <figure>
    <img src="https://via.placeholder.com/150">
  </figure>
  <section class="name">
    <p>Text Text</p>
  </section>
  <section class="title">
    <p>Text Text</p>
  </section>
  <section class="duration">
    <img src="https://via.placeholder.com/20">
  </section>
  <section class="alert">
    <img src="https://via.placeholder.com/20">
  </section>
  <section class="date">
    <p>More Text</p>
  </section>
  <section class="favorite">
    <img src="https://via.placeholder.com/20">
  </section>
</article>

Flex direction row alignment next to another flexbox container

2 Answers2