0 added
0 removed
Original
2026-01-01
Modified
2026-03-09
1
<p>Another common task is to create a layout with blocks that are of the same height.</p>
1
<p>Another common task is to create a layout with blocks that are of the same height.</p>
2
<p>It should be borne in mind that the contents of the blocks may differ and their “natural” heights may vary.</p>
2
<p>It should be borne in mind that the contents of the blocks may differ and their “natural” heights may vary.</p>
3
<p>The usual block model has a fundamental drawback: the neighboring blocks are totally unaware of each other, so there is no way to control their heights as a group. It turns out that all of the “standard” options for solving this problem do not work:</p>
3
<p>The usual block model has a fundamental drawback: the neighboring blocks are totally unaware of each other, so there is no way to control their heights as a group. It turns out that all of the “standard” options for solving this problem do not work:</p>
4
<ul><li><p>float or inline-block cannot be used to link together the heights of the neighboring blocks</p>
4
<ul><li><p>float or inline-block cannot be used to link together the heights of the neighboring blocks</p>
5
</li>
5
</li>
6
<li><p>You can use tables and CSS tables to create cells of the same height, but there are limitations on how you can arrange elements in lines, and HTML tables should only be used for tabular data.</p>
6
<li><p>You can use tables and CSS tables to create cells of the same height, but there are limitations on how you can arrange elements in lines, and HTML tables should only be used for tabular data.</p>
7
</li>
7
</li>
8
<li><p>The minimum height is not suitable, since one of the blocks can always be higher than the others.</p>
8
<li><p>The minimum height is not suitable, since one of the blocks can always be higher than the others.</p>
9
</li>
9
</li>
10
<li><p>Of course, you can assign a fixed height to all of the blocks, but this is far from being a universal solution.</p>
10
<li><p>Of course, you can assign a fixed height to all of the blocks, but this is far from being a universal solution.</p>
11
</li>
11
</li>
12
</ul><p>Flexbox provides an easy and elegant solution to this problem. After all, the flex items are stretched by default to the entire height of their respective containers.</p>
12
</ul><p>Flexbox provides an easy and elegant solution to this problem. After all, the flex items are stretched by default to the entire height of their respective containers.</p>
13
<p>Try to fix the layout in the float using a flexbox.</p>
13
<p>Try to fix the layout in the float using a flexbox.</p>