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

Answer 1

基于不必设置固定高度或使用CSS Grid或脚本，float和Flexbox的组合可能是实现此目的的唯一方法。

首先在标记中移动avatar-meta元素，对于桌面布局，我们在其上使用float: left，给它一个宽度，然后使用 BFC * 以及title / desc上的左边距。

对于 mobile ，我们使用Flexbox，并使用order属性将title移至顶部。

Updated codepen

Stack snippet

＆＃13;

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

＆＃13;

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

＆＃13;

BFC，代表块格式化上下文，这里有一些资源：

如何使用flexbox编写此布局？

1 个答案: