How can I write this layout with flexbox?

Question

There is my solution but doesn't work properly. I can fix with CSS grid but IE11 doesn't support properly.

Do you have any suggestion/solution? https://codepen.io/hamzaerbay/pen/KXJEWJ?editors=1100

<div class="box-wrapper">
    <div class="box title">Web Developer, Designer</div>
  <div class="avatar-meta box">
    <div class="avatar">
      <img src="https://s3.amazonaws.com/uifaces/faces/twitter/jsa/128.jpg" alt="">
    </div>
    <div class="box meta">
      <ul>
        <li>5 Average rating</li>
        <li>20,375 Reviews</li>
        <li>208,161 </li>
      </ul>
    </div>
  </div>
  <div class="box desc">
I'm a web designer and developer with a great passion for building beautiful new things from scratch.
    </div>
</div>  
.box{
  border:1px solid #ccc;
}
.box-wrapper{
  max-height:200px; 
  display:flex;
  flex-flow: column wrap;
  align-items: stretch;
  max-width:100%;
}
.avatar-meta{
  order:-1;
  flex-direction:column;
}
.avatar{
  img{
    width:120px;
    height:120px;
    border-radius:50%;
  }
}
@media screen and (max-width: 768px){
  .box-wrapper{
    flex-flow: column nowrap
  }
  box{
    flex:1 0 auto;
    width:100%;
  }
  .avatar-meta {
    display:flex;
    flex-flow:row wrap;
    min-height:140px;
  }
  .meta{
    flex:1 0 auto;
  }
  .title{
    order:-1;
  }
}

Do you want to use [grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout) instead of flexbox? — Duannx, Oct 20 '17 at 07:53
@Duannx I did with css grid but it doesn't work on ie11 https://codepen.io/hamzaerbay/pen/BwMBZZ — Hamza Erbay, Oct 20 '17 at 08:07
Ya. It does not work in IE 11. But i think there is no way to do it with flexbox. Maybe you can done it just by `float` and `media` — Duannx, Oct 20 '17 at 08:29
If you can set a fixed height on the outer most container, then yes, you can do it with Flexbox. This mean that in desktop mode, when content in the either column exceed that fixed height, 1 or both elements will get an inner scroll. — Asons, Oct 20 '17 at 08:41
@LGSon I don't want fixed height or max-height on .box-wrapper class — Hamza Erbay, Oct 20 '17 at 20:10
Let me know if my answer were helpful and can be accepted? ... and if not, is there something I can adjust, add or explain? — Asons, Oct 31 '17 at 07:17
@HamzaErbay CSS Grid first browser support was IE. For 2D layouts, use it. — evolutionxbox, Oct 31 '17 at 14:05

Asons · Accepted Answer · 2017-10-31T14:02:02.480

Based on not have to set a fixed height or using CSS Grid or script, a combination of float and Flexbox is likely the only way to accomplish that.

Move the avatar-meta element first in the markup, and for the desktop layout, we use float: left on it, give it a width and then use BFC* and a left margin on the title/desc.

For the mobile we use Flexbox, and with its order property moves the title to the top.

Updated codepen

Stack snippet

.box{
  border:1px solid #ccc;
}
.title, .desc{
  margin-left: 200px;
}
.avatar-meta{
  float: left;
  width: 200px;
}
.avatar img {
    width:120px;
    height:120px;
    border-radius:50%;
}
@media screen and (max-width: 768px){
  .box-wrapper{
    display: flex;
    flex-direction: column;
  }
  .avatar-meta {
    display:flex;
    min-height: 140px;
  }
  .title {
    order: -1;
  }
  .title, .desc {
    margin-left: 0;
  }
  .avatar-meta {
    float: none;
    width: auto;
  }
  .meta {
    flex-grow: 1;
  }
}

<div class="box-wrapper">
  <div class="avatar-meta box">
    <div class="avatar">
      <img src="https://s3.amazonaws.com/uifaces/faces/twitter/jsa/128.jpg" alt="">
    </div>
    <div class="box meta">
      <ul>
        <li> 4.6 Average rating</li>
        <li>25,375 Reviews</li>
        <li>208,161 Students</li>
        <li>3 Courses</li>
      </ul>
    </div>
  </div>
  <div class="box title">Web Developer, Designer, and Teacher</div>
  <div class="box desc">
I'm a web designer and developer with a great passion for building beautiful new things from scratch. I've been building websites since 2007 and also have a Master's degree in Engineering. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum laboriosam magni eum, error amet ex recusandae nostrum, temporibus quam in est nesciunt voluptas tempore velit aliquam beatae iste? Nihil, labore.

    </div>
</div>

BFC, which stands for block formatting context and here is a few resources:

How can I write this layout with flexbox?

1 Answers1