Flexbox布局 - 元素宽度

Question

如何使用flexbox实现这一目标？

  

.img应该有25％的宽度.info应该有75％的宽度.row   应该总是100％。半个应该有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>