What is Flexbox?
Flexbox is a layout mechanism designed for laying out groups of items in one dimension
Flex Container & Flex Item?
Flex container is an HTML element whose display property's value is flex or inline-flex. and Flex Item are children of Flex Container.
Basic terminology
main axis
The main axis of a flex container is the primary axis along which flex items are laid out. It is not always horizontal but it depends upon the flex-direction property.
cross axis
The axis perpendicular to the main axis is called the cross axis. Its direction depends on the main axis direction.
Flexbox properties
Flex container properties.
display
This defines a flex container. Its value can be either inline or inline-flex.
.container {
display: flex; /* or inline-flex */
}
flex-direction.
Flex-direction tells the browser in which direction flex container's direct children should be lay out.
Basically it decides the direction of main axis. Thus if defines in which order flex items will be placed.
row (default): left to right in ltr; right to left in rtl.
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.
row
.container { display: flex; flex-direction: row; }row-reverse
.container { display: flex; flex-direction: row-reverse; }column
.container { display: flex; flex-direction: column; }column-reverse
.container { display: flex; flex-direction: column-reverse; }
Values row and row-reverse are affected by the directionality of the flex container.
If its dir attribute is ltr, row represents the horizontal axis oriented from the left to the right, and row-reverse from the right to the left.
if the dir attribute is rtl, row represents the axis oriented from the right to the left, and row-reverse from the left to the right.
flex-wrap
By default all flex items will try to fit in one raw. we can change this flex-wrap property.
- 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.
column-reverse
.container { display: flex; flex-direction: row; flex-wrap: wrap; }
flex-flow
flex-flow is a shorthand for the flex-direction and flex-wrap properties.
Instead of flowing code,
section {
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
we can short our code by writing this,
section {
display: flex;
flex-flow: column wrap;
}
column-reverse
justify-content
The CSS justify-content property defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container.
.container {
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.
flex-start
.container { display: flex; justify-content: flex-start; }flex-end
.container { display: flex; justify-content: flex-end; }center
.container { display: flex; justify-content: center; }space-between
.container { display: flex; justify-content: space-between; }space-around
.container { display: flex; justify-content: space-around; }
align-items
align-items specifies how browsers should position a flexible container's items along the cross-axis of the flexbox.
.container {
align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}
stretch : stretch is align-items' default value. It stretches a flexible container's items to fill the flexbox's cross-axis.
flex-start : flex-start aligns a flexible container's items with the cross-start edge of the flexbox's cross-axis.
center : center aligns a flexible container's items to the center of the flexbox's cross-axis.
flex-end : flex-end aligns a flexible container's items with the cross-end edge of the flexbox's cross-axis.
baseline : baseline aligns a flexible container's items with the baseline of the flexbox's cross-axis.
stretch(default)
.container { display: flex; align-items:stretch; }flex-start
.container { display: flex; align-items: flex-start; }center
.container { display: flex; align-items: center; }flex-end
.container { display: flex; align-items: flex-end; }baseline
.container { display: flex; align-items: baseline; }
align-content
align-content specifies how browsers should position a flexible container's lines along the flexbox's cross-axis.
- flex-start : elements are placed at the beginning of the container.
- flex-end : elements are placed at the end of the container.
- center : elements are placed in the center.
- space-between : elements are separated with space around them
- space-around : elements are separated with space around them, as well as space between the elements the container edge
- stretch : this is the default. Elements stretch to take up the whole container.
flex-start
.container { display: flex; flex-wrap: wrap; align-content: flex-start; }flex-end
.container { display: flex; flex-wrap: wrap; align-content: flex-end; }center
.container { display: flex; flex-wrap: wrap; align-content: center; }space-between
.container { display: flex; flex-wrap: wrap; align-content: space-between; }space-around
.container { display: flex; flex-wrap: wrap; align-content: space-around; }stretch
.container { display: flex; flex-wrap: wrap; align-content: stretch ; }
gap, row-gap, column-gap
This gap property is used to give space between flex items.
gap
.container { display: flex; gap: 20px; }row-gap
.container { display: flex; row-gap: 40px; }column-gap
.container { display: flex; column-gap: 40px; }
flex items properties
order: By using order property we can decide in which order flex items will appear.
flex-grow: It defines the ability for a flex-item to grow if necessary. For example if flex-grow is set to 1 then al item will get equal space. And if any item flew-grow set to 2 then that item will get twice space of other item.
flex-shrink: The flex-shrink property specifies how the item will shrink relative to the rest of the flexible items inside the same container.
flex-basis: The flex-basis property specifies the initial length of a flexible item.
flex: The flex property is a shorthand property for flex-grow, flex-shrink, flex-basis The flex property sets the flexible length on flexible items.
align-self: The align-self property specifies the alignment for the selected item inside the flexible container.
order
.flex-item{ order: 5; }flex-grow
.flex-item{ flex-grow: 2;; }flex-shrink
.flex-item{ flex-shrink: 3;; }flex-basis
.flex-item{ flex-basis: 100px; }flex
.div{ flex: 1; }align-self
.flex-item{ align-self: center; }