2017-10-20 88 views
0

如何使用flexbox編寫此佈局? Responsive question如何使用flexbox編寫此佈局?

有我的解決方案,但無法正常工作。我可以用CSS網格修復,但IE11不能正確支持。

您有任何建議/解決方案嗎? 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; 
    } 
} 
+1

你想使用[電網](https://developer.mozilla.org/en-US/docs/ Web/CSS/CSS_Grid_Layout)而不是flexbox? – Duannx

+0

@Duannx我做了與CSS網格,但它不工作ie11 https://codepen.io/hamzaerbay/pen/BwMBZZ –

+1

婭。它在IE 11中不起作用。但我認爲沒有辦法用flexbox來完成它。也許你可以通過'float'和'media'完成它 – Duannx

回答

2

基於沒有設置固定的高度或使用CSS網格或腳本的float組合和Flexbox,就可能實現這一目標的唯一途徑。

第一移動avatar-meta元素的標記,併爲桌面佈局,我們使用float: left它,給它一個寬度,然後用BFC *並在title/desc左邊距。

對於移動我們使用Flexbox,並使用其order屬性將title移動到頂部。

Updated codepen

棧片斷

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