Comment puis-je écrire cette mise en page avec flexbox?

Question

Comment puis-je écrire cette mise en page avec flexbox?

Il ya ma solution mais ne fonctionne pas correctement. Je peux corriger avec la grille CSS, mais IE11 ne supporte pas correctement.

Avez-vous des suggestions/solutions? 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; 
    } 
} 

Answer 1

Sur la base ne doivent définir une hauteur fixe ou en utilisant la grille ou d'un script CSS, une combinaison de float et Flexbox est probablement la seule façon d'y parvenir.

Déplacer l'élément avatar-meta premier dans le balisage, et pour la mise en page de bureau , nous utilisons float: left sur elle, lui donner une largeur puis utilisez * CBF et une marge gauche sur la title/desc.

Pour le mobile, nous utilisons Flexbox, et sa propriété order déplace le title vers le haut.

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> \t 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>

---

• CBF, qui signifie bloc de mise en forme et le contexte voici quelques r essources:

  • How does the CSS Block Formatting Context work?
  • Block Level Element vs Block Formatting Context
  • https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context