0 added
0 removed
Original
2026-01-01
Modified
2026-03-09
1
<p>CSS Flexible Box Layout (shortened by everyone to “Flexbox”) is the first CSS mechanism that is designed to be used to create complex layouts of blocks.</p>
1
<p>CSS Flexible Box Layout (shortened by everyone to “Flexbox”) is the first CSS mechanism that is designed to be used to create complex layouts of blocks.</p>
2
<p>The other mechanisms that we used in the past to create layouts were not at all purpose built to accomplish this task: we needed to use floating blocks to create blocks when we wanted the text to flow around them. Alternatively, we used absolute positioning to make very fragile layouts.</p>
2
<p>The other mechanisms that we used in the past to create layouts were not at all purpose built to accomplish this task: we needed to use floating blocks to create blocks when we wanted the text to flow around them. Alternatively, we used absolute positioning to make very fragile layouts.</p>
3
<p>Flexbox was conceived as a way of creating “flexible” layouts, and it is a tool with many subtleties and wonderful features, which we will delve into in this series of chapters. First, let’s start with some basics. How do you enable flexboxes?</p>
3
<p>Flexbox was conceived as a way of creating “flexible” layouts, and it is a tool with many subtleties and wonderful features, which we will delve into in this series of chapters. First, let’s start with some basics. How do you enable flexboxes?</p>
4
<p>It’s very simple: just assign the display: flex; property to the parent element. When you do this, two events will occur:</p>
4
<p>It’s very simple: just assign the display: flex; property to the parent element. When you do this, two events will occur:</p>
5
<ol><li>The element with display: flex; will be transformed into a <em>flex container</em>, and all of the magic of a flexible layout will start happening inside it.</li>
5
<ol><li>The element with display: flex; will be transformed into a <em>flex container</em>, and all of the magic of a flexible layout will start happening inside it.</li>
6
<li>The immediate children of this element will be transformed into<em>flex items</em>, and they will start playing according to the new rules.</li>
6
<li>The immediate children of this element will be transformed into<em>flex items</em>, and they will start playing according to the new rules.</li>
7
</ol><p>The first thing that you will notice after completing this task is that the blocks will stretch to the full height of the container. Yes, you can make all items have a uniform height inside a flexbox!</p>
7
</ol><p>The first thing that you will notice after completing this task is that the blocks will stretch to the full height of the container. Yes, you can make all items have a uniform height inside a flexbox!</p>
8
<p>Let’s experiment!</p>
8
<p>Let’s experiment!</p>
9
<p>At the time of writing of this chapter,<a>support for flexboxes</a>is very good in modern browsers, which means that we can now use them in our layouts with confidence.</p>
9
<p>At the time of writing of this chapter,<a>support for flexboxes</a>is very good in modern browsers, which means that we can now use them in our layouts with confidence.</p>