This content originally appeared on DEV Community and was authored by SnowBit
In the past, CSS layouts have been a huge pain point for web designers. In order to create a responsive layout, multiple divs have to be used throughout the HTML, and then the CSS needs to be modified to accommodate that. Flexbox is a way to create responsive layouts without this problem. Here's an intro on what flexbox is and how it works.
display
- This states a flex container.
- It enables flex context of all it's children.
- It can be inline or block
.div{
display: flex;
}
flex-direction
- It defines the direction of flex, items placed in a flex container.
- It is a single-direction layout concept.
.container {
flex-direction: row | row-reverse | column | column-reverse;
}
row (default): left to right in ltr; right to left
row-reverse: right to left in ltr; left to right
column: same as row but top to bottom
column-reverse: same as row-reverse but bottom to top
flex-wrap
- By default, items will try to be fit in one line.
.container {
flex-wrap: nowrap | wrap | wrap-reverse;
}
- nowrap - all flex items will be on one line
- wrap - flex items will wrap onto multiple lines, from top to bottom.
- wrap-reverse - flex items will wrap onto multiple lines from bottom to top.
flex-flow
- It is a shorthand for flex-wrap and flex-direction properties and they together defines the cross axes of the main container
.container {
flex-flow: column wrap;
}
flex-shrink
- It defines the ability for flex item to shrink accordingly
.item {
flex-shrink: 3; /* default 1 */
}
Make sure negative numbers are invalid
align-self
- It allows the default alignment needs to be overridden for a flex item
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
align-content
- This aligns a flex container’s lines within when there is extra space in the cross-axis.
.container {
align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}
order
.item {
order: 5; /* default is 0 */
}
This content originally appeared on DEV Community and was authored by SnowBit
SnowBit | Sciencx (2021-11-07T14:55:30+00:00) Flexbox Properties Explained. Retrieved from https://www.scien.cx/2021/11/07/flexbox-properties-explained/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.