An Interest In:
Web News this Week
- April 1, 2024
- March 31, 2024
- March 30, 2024
- March 29, 2024
- March 28, 2024
- March 27, 2024
- March 26, 2024
CSS 101 - Flexbox
One of my 2021 resolution is to strength my knowledge of CSS. I postpone the training since almost one year. So this time no excuse, everyday, I will publish here on Dev.to what I learn from my CSS course the day before.
Click follow if you want to miss nothing.
Flexbox
Since flexbox is a whole module and not a single property, it involves a lot of things including its whole set of properties. Some of them are meant to be set on the container (parent element, known as flex container) whereas the others are meant to be set on the children (said flex items).
Flex container properties
Here a list of properties that apply to the container
This defines a flex container
.container { display: flex;}
Flex direction
This property define the direction flex items are placed in the flex container:
- row (left to right)
- row-reverse (right to left)
- column (top to bottom)
- column-reverse (bottom to top)
.container { flex-direction: row; }
flex-wrap
By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap as needed with this property. (wrap, nowrap, wrap-reverse)
.container { flex-wrap: wrap; }
justify-content
This defines the alignment along the main axis. It helps distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size.
flex-start [- - - ]flex-end [ - - -]center [ - - - ]space-between [- - -] space-around [ - - - ]space-evenly [ - - - ]
.container { justify-content: flex-start; }
align-items
This defines the default behavior for how flex items are laid out along the cross axis on the current line
flex-start [ ----- ][ ][ ]flex-end [ ][ ][ ----- ]center [ ][ ----- ][ ]stretch [ | | | ][ | | | ][ | | | ]
.container { align-items: flex-start; }
Flex items properties
Here a list of properties that apply to individual item
Order
By default, flex items are laid out in the source order. However, the order property controls the order in which they appear in the flex container.
.item { order: 5; }
flex-grow
This defines the ability for a flex item to grow if necessary
.item { flex-grow: 1;
align-self
This allows the default alignment (or the one specified by align-items) to be overridden for individual flex items.
For example if align-items is set to flex-start
[ ----- ][ ][ ]
Setting .item3 to:
.item3 { align-self: flex-end;}
Will create this custom alignment:
[ -- -- ][ ][ _ ]
Conclusion
That's it for today. Tomorrow the journey continue, see you later! If you want to be sure to miss nothing click follow me here or on twitter!
Follow me on Twitter: Follow @justericchapman
Original Link: https://dev.to/ericchapman/css-101-flexbox-3nng
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To