0 added
0 removed
Original
2026-01-01
Modified
2026-03-09
1
<p>The cards are lined up in a single row, and now they are all the same height. This happened because their parent item is a flex container with stretch cross alignment.</p>
1
<p>The cards are lined up in a single row, and now they are all the same height. This happened because their parent item is a flex container with stretch cross alignment.</p>
2
<p>Now let’s design the “Complete course” buttons so that they are aligned with the bottom edge of the card. To do this:</p>
2
<p>Now let’s design the “Complete course” buttons so that they are aligned with the bottom edge of the card. To do this:</p>
3
<ul><li>Assign a positive growth factor to the .card-content block so that it occupies all of the available space in the card.</li>
3
<ul><li>Assign a positive growth factor to the .card-content block so that it occupies all of the available space in the card.</li>
4
<li>Convert the .card-content block into a flex container with the main axis oriented from top to bottom.</li>
4
<li>Convert the .card-content block into a flex container with the main axis oriented from top to bottom.</li>
5
<li>Configure the button to have an automatic top indent so that it presses up against the end of the main axis of the .card-content block.</li>
5
<li>Configure the button to have an automatic top indent so that it presses up against the end of the main axis of the .card-content block.</li>
6
</ul><p>Remember how we created cards using flex containers during the first step? Without these containers, it would be impossible for us to the stretch the height of the nested blocks using flex-grow.</p>
6
</ul><p>Remember how we created cards using flex containers during the first step? Without these containers, it would be impossible for us to the stretch the height of the nested blocks using flex-grow.</p>