In keeping with flexbox's goal of flexibility, individual flex items can be given some exceptions to the flow and rules of the flex container. They can break out of the flex line's alignment, resize to different proportions and change the order in which they appear.
If you need individual flex items to have unique alignment on the flex line, you can utilize the align-self property. It adopts all of the same values as the align-items property, except you apply it to a specific flex item rather than the whole container.
<style> <div class="container"> |
|
Item 1
Item 2
Item 3
Item 4
Item 5
|
Instead of using a specific width designation (or height when in a column setup), you can adjust the dimension proportionally with the flex property. To understand the proportion of this property, add up each of the flex values you've assigned to the flex items. Note that if you assign a flex value to a container, the items inside will have a flex value of 1 by default.
Let's say you have three flex items and have assigned them each a value 1. When adding them up, you get a total of 3. This means the size of each flex item will be 1 out of 3 (one-third). However, if you assign a value of 2 to one of the items, the total will go up to 4—so the proportion changes. Two of the items will have a proportion of 1 out of 4 (one-fourth), and the item with the value of 2 assigned will be 2 out of 4 (two-fourths or one-half).
|
<style> <div class="container"> |
|
Item 1
Item 2
Item 3
|
One other change you can make is a flex item's position in line. Instead of rotating the code around to switch flex item positions, you can assign one the order property. This property takes on number values to determine the item's position in line. If you use a positive number, it will move that many spots forward in line, while a negative number will move it that many spots backward.
<style> <div class="container"> |
|
Item 1
Item 2
Item 3
Item 4
Item 5
|
