💻 Tech
In CSS, primary (main) and cross axes are directions that are perpendicular to each other. They determine the direction and alignment of the flex items in a flex container. For example, if flex-direction is row, the direction of the primary axis is from left to right. From there, you can set how the items are aligned in that axis. If you set justify-content to flex-start, the items will start from left to right. If center, they will be aligned to the center. Still with row value of flex-direction, for the cross axis, it will run from top to bottom. You can use align-items with value center to align items in the cross axis.
<body>
<div style="background-color: blue; height: 100px"></div>
<div
style="height: 100px; display: flex; flex-direction: row; justify-content: flex-start; align-items: stretch"
>
<div style="background-color: yellow; width: 50px; min-height: 30px"></div>
<div style="background-color: red; width: 50px; height: 70px"></div>
<div style="background-color: green; width: 50px; height: 90px"></div>
</div>
</body>Source: