To achieve this specific layout, it is crucial to ensure that the primary flex container has equal heights applied to its items.
The next step involves making the individual flex items serve as nested flex containers, allowing for easy centering of content within each item.
By implementing these two levels of flex containers, the first level establishes equal height among the items while the second level handles content centering.
(Refer to the note below for further clarification on this technique.)
Here is an example tailored to your code structure:
body {
height: 300px; /* added for demonstration */
color: white;
}
flex-container {
display: flex; /* main flex container */
flex-direction: row; /* horizontal alignment of items
(default value; can be omitted) */
align-items: stretch; /* ensures equal heights among items
(default value; can be omitted) */
height: 100%;
}
flex-item {
display: flex; /* nested flex container */
flex-direction: column; /* vertical alignment of items */
justify-content: center; /* vertically center items */
align-items: center; /* horizontally center items */
}
flex-item:first-child {
flex: 3; /* consumes 3 times more space than sibling */
background-color: #a333c8;
}
flex-item:last-child {
flex: 1;
background-color: #db2828;
}
<flex-container>
<flex-item><!-- also a flex container -->
<p>Text Text Text</p>
<p>Text Text Text</p>
<p>Text Text Text</p>
<p>Text Text Text</p>
</flex-item>
<flex-item><!-- also a flex container -->
<div>Forward</div>
</flex-item>
</flex-container>
Sometimes, people mistake a flex item and its content as one single entity, which is inaccurate.
When analyzing the HTML structure of a flex container, there are three distinct levels:
- the container
- the item
- the content
Hence, the content within an item should not be equated to the item itself; instead, it should be viewed as a separate element.
In cases where the content inside an item consists of text, it essentially becomes an anonymous element.
As per the flexbox specifications:
Section 4. Flex Items
Every in-flow child within a flex container transforms into a flex item, and any continuous run of text directly enclosed within a flex container gets enveloped in an unknown flex item.
This is why, in the provided solution above, the flex item is configured to act as a flex container, facilitating the utilization of flex properties on its children (the contents).