Can this layout use flexbox? - css

Question

Since I'm new to flexbox, I can't find a way to get this layout work (or maybe it's impossible with flexbox).
Basically I want to have 3 columns: first one is the image, second is the H1 and description, and third is the button. The thing is I want the description to be able to expand underneath the button (the button should be on same row with the H1). Using float this is easy, but since I'm designing mobile first I want to use flexbox as much as possible. Can this be done with flexbox?

Answer 1

you can nest flexboxes. You'll need 3 nesting levels
Img + Text
In Text you'll have two units - Head + body
In Head you'll have two units - Title + button
<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>
live sample: http://codepen.io/anon/pen/mvzid?editors=110

Answer 2

I know this is old, This is another solution:
<div class="wrapper">
<div class="image-cont">
<img src="https://via.placeholder.com/150">
</div>
<div class="details-cont">
<h1>H1 title</h1>
<button type="button">Click Me!</button>
<p>long desription here... long description here... long description here</p>
</div>
</div>
CSS:
.wrapper {
display: flex;
}
.details-cont {
display: flex;
flex-wrap: wrap;
padding: 10px;
justify-content: center;
align-items: center;
}
p {
width: 100%;
margin: 0;
}
button {
margin-left: auto;
}