css - 这个布局可以使用flexbox吗？

Question

因为我是 flexbox 的新手，所以我找不到一种方法来实现这种布局(或者可能无法使用 flexbox)。

基本上我想要 3 列:第一列是图像，第二列是 H1 和描述，第三列是按钮。问题是我希望描述能够在按钮下方展开(按钮应该与 H1 位于同一行)。使用 float 这很容易，但由于我首先设计移动设备，所以我想尽可能多地使用 flexbox。这可以用 flexbox 来完成吗？

Answer 1

你可以嵌套 flex 盒子。你需要 3 层嵌套

1. 图片+文字

2. 在文本中，您将有两个单元 - 头部 + 主体

3. 在 Head 中，您将有两个单元 - 标题 + 按钮

   <div class="flex">
   <div>
     <img src="#">
   </div>
   <div class="flex column">
     <div class="flex head">
       <h1>Title goes here</h1>
       <button>Button</button>
     </div>
     <p>Lorem ipsum dolor sit amet</p>
   </div>
   

现场样本:http://codepen.io/anon/pen/mvzid?editors=110