Table of contents
No headings in the article.
The aim of CSS Flexbox is to provide a better way to layout , align, distribute space among items in the container. it include lot's of things some of them called as container (parent element known as "flex container") and the other one called as children (child element known as "flex item").
Flexbox having lot's of different properties but they are mainly distribute in two parts they are as follows.
Properties for the Parent (flex container).
Properties for the Children (flex items)
Display: This defines a flex container; inline or block depending on the given value. It enables a flex context for all its direct children.
Syntax:
.container {
display: flex;
}
- Properties for the Parent (flex container).
- Flex direction property:
It define in which direction item should be flexed, in {row/ column/ row-reverse / column-reverse} by default the flex direction is row.
row-reverse: right to left in ltr; left to right in rtl
column: same as row but top to bottom
column-reverse: same as row-reverse but bottom to top
Syntax:
.container{
display:flex;
flex-direction:column |row | row-reverse| column-reverse;
}
- Flex wrap:
By default all the flex item try to fixed or lie in one line. with the help of this property we can change it and adjust in more than one line according to the screen size.
nowrap (default): 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.
Syntax:
.container {
display:flex;
flex-wrap: nowrap | wrap | wrap-reverse;
}
- Justify-Content:
It define the alignment along main axis.
Syntax:
.container {
display:flex;
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
}
flex-start (default): items are packed toward the start of the flex-direction.
flex-end: items are packed toward the end of the flex-direction.
start: items are packed toward the start of the writing-mode direction.
end: items are packed toward the end of the writing-mode direction.
left: items are packed toward left edge of the container, unless that doesn’t make sense with the flex-direction, then it behaves like start.
right: items are packed toward right edge of the container, unless that doesn’t make sense with the flex-direction, then it behaves like end.
center: items are centered along the line
space-between: items are evenly distributed in the line; first item is on the start line, last item on the end line
space-around: items are evenly distributed in the line with equal space around them.
space-evenly: items are distributed so that the spacing between any two items (and the space to the edges) is equal.
- Align-Item:
It define the alignment along cross-axis.
Syntax:
.container {
display:flex;
align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end;
}
stretch (default): stretch to fill the container.
flex-start / start / self-start: items are placed at the start of the cross axis.
flex-end / end / self-end: items are placed at the end of the cross axis.
center: items are centered in the cross-axis
baseline: items are aligned such as their baselines align
- Align-content :
Align a flex container's lines when there is extra space in a cross axis.
Syntax:
.container {
display:flex;
align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline;
}
normal (default): items are packed in their default position as if no value was set.
flex-start / start: items packed to the start of the container.
flex-end / end: items packed to the end of the container.
center: items centered in the container
space-between: items evenly distributed; the first line is at the start of the container while the last one is at the end
space-around: items evenly distributed with equal space around each line
space-evenly: items are evenly distributed with equal space around them
stretch: lines stretch to take up the remaining space
- Gap, row-gap, column-gap:
The gap property controls the space between flex items. It applies that spacing only between items not on the outer edges of flex-item.
Syntax:
.container {
display: flex;
gap: 10px;
gap: 10px 20px; /* row-gap column gap */
row-gap: 10px;
column-gap: 20px;
}
row-gap: with the help of this property we can adjust gap between two row of item.
2.Properties for the Children (flex items)
- Order
It controls the order in which the item appear in the flex container.
Syntax:
.item {
order: 5; /* default is 0 */
}
- Align-self:
Allow default alignment to be overridden for the individual flex item.
Syntax:
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
- Flex-Grow
It defines the ability for a flex item to grow.
Syntax:
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
- Flex-Shrink
It specify how much a flex item will shrink relative to the rest of the flex item.
Syntax:
.item {
flex-shrink: 3;
}