How to correctly create a block using mainly flexbox - html

Question

I have the task of compose such a block. I could make it using CSS3 position relative position absolute.
And need to compose this block using Flexbox.
What i have got it's in the bottom.If it's possible try to use it and don't write from scratch.
.item {
position: relative;
display: -webkit-flex;
display: flex;
width: 100%;
margin-bottom: 8px;
box-shadow: 0 1px 4px rgba(41,51,57,.5);
color: #37454d;
background: #fff;
}
.item_wrapper {
width: 100%;
position: relative;
}
.image-wrapper:before {
content: "";
display: block;
padding-top: 100%;
}
.item_image {
position: absolute;
top: 0;
width: 100%;
height: 100%;
left: 0;
-webkit-transition: -webkit-transform .3s;
transition: -webkit-transform .3s;
transition: transform .3s;
transition: transform .3s,-webkit-transform .3s;
}
.image-area {
padding: 8px 6px 8px 8px;
width: 22.25%;
float: left;
}
.image-wrapper {
position: relative;
line-height: 0;
overflow: hidden;
}
.image-wrapper:hover{
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
.image_gallery {
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
border-radius: 0;
margin: 0;
-webkit-transition: opacity .3s;
transition: opacity .3s;
opacity: 0;
display: block;
background: 0;
position: absolute;
cursor: pointer;
padding: 0;
border:0;
}
.flex-column {
height: 100%;
display: flex;
align-items: stretch;
}
.item_details {
position: relative;
width: 100%;
border-right: 1px solid #cdd0d2;
margin: 8px 0;
border-bottom: 0;
float: left;
padding: 0 8px 0 4px;
}
.item_name {
margin-bottom: 16px;
font-size: 20px;
display: inline-block;
width: 100%;
}
.name_copytext {
color: #005f81;
margin: 0;
max-width: calc(100% - 38px);
text-overflow: ellipsis;
width: 100%;
float: left;
text-align: left;
direction: ltr;
overflow: hidden;
white-space: nowrap;
}
.item_location {
overflow: hidden;
}
.details_paragraph {
padding-right: 0px;
margin-bottom: 16px;
line-height: 1.30;
overflow: hidden;
}
.item_dynamic-content {
display: block;
font-size: 12px;
padding: 0;
}
.item_deal {
display: flex;
display: -webkit-flex;
align-items: stretch;
-webkit-align-items:stretch;
padding: 8px;
width: 47%;
}
.item_best-details {
display: flex;
display: -webkit-flex;
-webkit-flex-direction:column;
flex-direction: column;
-webkit-justify-content:space-around;
justify-content: space-around;
-webkit-flex-wrap:wrap;
flex-wrap: wrap;
flex-grow:2;
-webkit-flex-grow:2;
clear: none;
float: none;
text-align: center;
width: 100%;
-webkit-order:3;
order: 3;
}
<article class="item">
<div class="item_wrapper">
<div class="image-area">
<div class="image-wrapper">
<img src="https://media-cdn.tripadvisor.com/media/photo-s/07/6e/64/52/hyatt-regency-santa-clara.jpg" class="item_image">
<button type="button" class="image_gallery">
</button>
</div>
</div>
<div class="flex-column">
<div class="item_details">
<div class="item_name">
<h3 class="name_copytext" title="Hyatt Regency Santa Clara">Hyatt Regency Santa Clara</h3>
</div>
<div class="item_location">
<p class="details_paragraph">Santa Clara, California, USA </p>
</div>
<div class="item_review">
<div class="details_paragraph">
<em class="rating-number">
<span class="rating-number_value">Very good</span>
</em>
<span class="review_count">(2045 reviews)</span>
</div>
</div>
</div>
<section class="item_deal">
<div class="item-link">
<div class="item_best-details">
<!-- dozen blocks-->
</div>
</div>
</section>
</div>
</div>
</article>
Here is a jsfiddle

Answer 1

This is the box model you must follow to do it with flexbox and with a clear structure. Each area is a container.
.Card,
.Card * {
background-color: rgba(0, 0, 0, 0.05);
margin: 8px;
}
.Card {
display: flex;
min-height: 300px;
}
.Picture {
width: 200px;
display: flex;
flex-direction: column;
}
.Picture img {
flex-grow: 1;
}
.Desc {
height: 20px;
}
.Content {
flex-grow: 1;
display: flex;
flex-direction: column;
}
.ContentHead {
height: 20px;
}
.ContentDetail {
flex-grow: 1;
display: flex;
}
.Details {
flex-grow: 1;
}
.Side {
flex-basis: 30%;
}
<div class="Card">
<div class="Picture">
<img src="" alt="">
<div class="Desc"></div>
</div>
<div class="Content">
<div class="ContentHead"></div>
<div class="ContentDetail">
<div class="Details"></div>
<div class="Side"></div>
</div>
</div>
</div>