00. Code: display: flex; | Info: Display "flex" will position the items horizontally by default.

01. Code: flex: 1; | Info: The code is a shorthand offlex-grow: 1; flex-shrink: 1; flex-basis: 0; which makes the items grow or shrink equally to fill all of the available space.

02. Code: justify-content: space-between; | Info: This will align items across the main axis.

03. Code: justify-content: center; | Info: This will center the boxes along the main axis.

04. Code: gap: 8px; | Info: This will adds a specified space between flex items, similar to adding a margin to the items themselves.