html - Flexbox 布局 - 元素宽度

Question

我怎样才能用 flexbox 实现这个？

.img should have 25% of width .info should have 75% of width .row should have always 100% .half should have 50%

这是我的代码 http://codepen.io/anon/pen/zrBRgP

.wrap {display: flex;}
.row { width: 100%;}
.half {width: 50%;}

为什么行没有 100% 的 div？

Answer 1

使用flex-basis而不是 width。

您还需要对行应用 flex 布局。

This article是一本很好的 flex 指南。

.wrap {
  display: flex;
  flex-direction: column;
}
div {
  border: 1px black dotted;
}
img {
  width: 100%;
}
.img {
  flex-basis: 25%;
}
.info {
  flex-basis: 75%;
}
.half {
  flex-basis: 50%;
}
.row {
  display: flex;
  flex-basis: 100%;
}

<div class="wrap">
  
  <div class="row">
    <div class="img">
      <img src="http://41.media.tumblr.com/tumblr_lvrfnaXz651qibz0jo1_r1_500.png" />
    </div>
    <div class="info">
      <h3>Hello How Are You</h3>
    </div>
  </div>

  <div class="row">
    <div class="half">1</div>
    <div class="half">2</div>
  </div>
  
  <div class="row">
    <div class="half">1</div>
    <div class="half">2</div>
  </div>
  
</div>

根据@ZcelaAnonymní 的评论更新

* {
  box-sizing: border-box;
}
.wrap {
  display: flex;
  flex-direction: column;
}
div {
  border: 1px black dotted;
}
img {
  width: 100%;
}
.img {
  flex: 0 0 25%;
}
.info {
  flex: 0 0 75%;
}
.half {
  flex: 0 0 50%;
}
.row {
  display: flex;
  flex: 0 0 100%;
  flex-wrap: wrap;
}

<div class="wrap">
  
  <div class="row">
    <div class="img">
      <img src="http://41.media.tumblr.com/tumblr_lvrfnaXz651qibz0jo1_r1_500.png" />
    </div>
    <div class="info">
      <h3>Hello How Are You</h3>
    </div>
  </div>

  <div class="row">
    <div class="half">1</div>
    <div class="half">2</div>
    <div class="half">1</div>
    <div class="half">2</div>
  </div>
  
</div>