The immediate child elements of a flex container are automatically designated as flexible (flex) items.
The element depicted above showcases four blue flex items contained within a gray flex container.
Example
| <div class=”flex-container”> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> |
The properties of flex items include:
The order property determines the sequence of the flex items.
The initial flex item in the code doesn’t necessarily need to be positioned as the first item in the layout.
The order value must be a numeric value, with the default being 0.
Example
The order property has the ability to modify the arrangement of the flex items.
| <div class=”flex-container”> <div style=”order: 3″>1</div> <div style=”order: 2″>2</div> <div style=”order: 4″>3</div> <div style=”order: 1″>4</div> </div> |
The flex-grow property determines the extent to which a flex item can expand compared to other flex items.
The value must be numeric, with the default being 0.
Example
Increase the growth rate of the third flex item by eight times compared to the other flex items.
|
<div class=”flex-container”> |
The flex-shrink property determines the extent to which a flex item can decrease in size relative to other flex items.
The value must be numeric, with the default set to 1.
Example
Restrict the amount of shrinkage for the third flex item compared to the other flex items.
| <div class=”flex-container”> <div>1</div> <div>2</div> <div style=”flex-shrink: 0″>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> <div>10</div> </div> |
The flex-basis property defines the initial size of a flex item.
Example
Define the initial size of the third flex item as 200 pixels.
|
<div class=”flex-container”> |
The flex property serves as a shorthand for the flex-grow, flex-shrink, and flex-basis properties.
Example
Ensure that the third flex item cannot grow (0), shrink (0), and set its initial size to 200 pixels.
|
<div class=”flex-container”> |
The align-self Property
The align-self property determines the alignment of the selected item within the flexible container.
It overrides the default alignment established by the container’s align-items property.
In these examples, we utilize a container with a height of 200 pixels to provide a clearer illustration of the align-self property.
Example
Position the third flex item at the center of the container.
| <div class=”flex-container”> <div>1</div> <div>2</div> <div style=”align-self: center”>3</div> <div>4</div> </div> |
Example
Align the second flex item to the top of the container, and the third flex item to the bottom of the container.
| <div class=”flex-container”> <div>1</div> <div style=”align-self: flex-start”>2</div> <div style=”align-self: flex-end”>3</div> <div>4</div> </div> |
