I want to create a flexbox layout where all the titles are aligned in a row. Here are the requirements:
- The images may vary in height
- The descriptions may vary in height
- The title could be displayed in 1 or 3 rows, depending on its length.
Check out this simple fiddle:
https://jsfiddle.net/youradds/r56j4uLe/6/
Here is the current output:
https://i.sstatic.net/aY12K.png
This is how I envision it:
https://i.sstatic.net/3xGAu.png
Below is my SCSS code:
#item-wrapper {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
.item-block {
background: yellow;
flex-grow: 0;
width: 350px;
margin: 2rem 1rem;
display: flex;
flex-direction: column;
justify-content: space-between;
align-content: center;
align-items: center;
.what-logo {
img {
max-height: 100%;
}
}
.text-info {
flex-grow: 1;
.desc {
padding: 1rem;
}
h2 {
flex-grow: 0;
}
}
.action-button {
margin: 0 auto;
}
}
}
.pure-img {
max-width: 100%;
height: auto;
display: block;
}
Test HTML snippet:
<div id="item-wrapper">
<div class="item-block">
<div class="what-logo">
<img src="https://bodywisegym.co.uk/2018/images/events/3/3-1562951826-3.png" class="pure-img">
</div>
<div class="text-info">
<h2>Zydrunas Savickas Seminar</h2>
<div class="desc">Bodywise Gym and Studios are proud to announce we are bringing the greatest strongman Zydrunas Savickas (Big Z) to Horsham for a seminar.</div>
</div>
<a href="https://yogida.co.uk/collections/events/products/zydrunas-savickas-big-z-seminar" class="action-button">Find out more »</a>
</div>
<div class="item-block">
<div class="what-logo">
<img src="https://bodywisegym.co.uk/2018/images/events/7/7-1562936970-7.jpg" class="pure-img">
</div>
<div class="text-info">
<h2>Class for mums</h2>
<div class="desc">Join Quick HIIT</div>
</div>
<a href="" class="action-button">Find out more »</a>
</div>
<div class="item-block">
<div class="what-logo">
<img src="https://bodywisegym.co.uk/2018/images/events/6/6-1562936464-6.png" class="pure-img">
</div>
<div class="text-info">
<h2>Gratitude Day</h2>
<div class="desc">To spread the positivity you can bring a training partner along to workout with you or to attend one of our classes.</div>
</div>
<a href="" class="action-button">Find out more »</a>
</div>
<div class="item-block">
<div class="what-logo">
<img src="https://bodywisegym.co.uk/2018/images/events/4/4-1562951950-4.jpg" class="pure-img">
</div>
<div class="text-info">
<h2>The experience of non-duality</h2>
<div class="desc">Yoga & meditation workshop with Indian Spiritual Master Acharya Shree Shankar </div>
</div>
<a href="https://yogida.co.uk/collections/workshops" class="action-button">Find out more »</a>
</div>
</div>
Note: This design is responsive, so setting a fixed height on image divs may not work well across different screen sizes:
https://i.sstatic.net/tz2Wg.png
On smaller screens, scaling down to 1 element per row may lead to excessive padding between the image and title like shown here: