0 added
0 removed
Original
2026-01-01
Modified
2026-03-09
1
<p>We are now finished with our review of the theoretical material, so let’s get down to the practical part. Let’s consider the examples of some real interface elements and specific cases where it would be convenient to use flexboxes.</p>
1
<p>We are now finished with our review of the theoretical material, so let’s get down to the practical part. Let’s consider the examples of some real interface elements and specific cases where it would be convenient to use flexboxes.</p>
2
<p>A fairly common interface element is a block containing a heading and a small explanatory subheading on the same line. The heading is located at the beginning of the line, and the subheading is pushed to the right edge of the block.</p>
2
<p>A fairly common interface element is a block containing a heading and a small explanatory subheading on the same line. The heading is located at the beginning of the line, and the subheading is pushed to the right edge of the block.</p>
3
<p>If the text of the heading or subheading increases significantly in size, then it should not break the layout: the texts simply have to be arranged one on top of the other.</p>
3
<p>If the text of the heading or subheading increases significantly in size, then it should not break the layout: the texts simply have to be arranged one on top of the other.</p>
4
<p>You cannot lay out an element with such flexible behavior using float or display: table. After all, we need the signature blocks to occupy the free space at the same time and to adjust their sizes depending on the text content, and the grid should be rebuilt if their contents overflow.</p>
4
<p>You cannot lay out an element with such flexible behavior using float or display: table. After all, we need the signature blocks to occupy the free space at the same time and to adjust their sizes depending on the text content, and the grid should be rebuilt if their contents overflow.</p>
5
<p>Only a flexbox with flex-grow will be able to help us do this.</p>
5
<p>Only a flexbox with flex-grow will be able to help us do this.</p>
6
<p>For clarity, set a background color and frame for the text blocks, through you will remove them for the next assignment.</p>
6
<p>For clarity, set a background color and frame for the text blocks, through you will remove them for the next assignment.</p>