CSS Flexbox

Flex box contains flex items and flex container. In CSS, the concept of Flex box is as follow,

flexbox

The container can be displayed as,

.container{
   display:flex;
}

/*the flex items can be defined as*/

.item{
   order:3;
}

The flex items are placed in the flex container. The flexbox is a single direction layout concept. The flex items layout is either in horizontal rows and vertical columns.

The flex direction as shown bellow

flexbox direction
.container{
   flex-direction: row; /* you can use row-reverse, column, column-reverse*/
}
  • row: left to right in ltr, right to left in rtl
  • row-reverse: right to left in ltr, right to left in rtl
  • column: same as row but top to bottom
  • column-reverse: same as row-reverse but bottom to top

example,

See the Pen flexbox by Arpit (@soniarpit) on CodePen.

Various properties of flex are,

PropertyDescription
displaySpecifies the type of box used for an HTML element
flex-directionSpecifies the direction of the flexible items inside a flex container
justify-contentHorizontally aligns the flex items when the items do not use all available space on the main-axis
align-itemsVertically aligns the flex items when the items do not use all available space on the cross-axis
flex-wrapSpecifies whether the flex items should wrap or not, if there is not enough room for them on one flex line
align-contentModifies the behavior of the flex-wrap property. It is similar to align-items, but instead of aligning flex items, it aligns flex lines
flex-flowA shorthand property for flex-direction and flex-wrap
orderSpecifies the order of a flexible item relative to the rest of the flex items inside the same container
align-selfUsed on flex items. Overrides the container’s align-items property
flexA shorthand property for the flex-grow, flex-shrink, and the flex-basis properties

Previous: CSS Variables

Next: CSS Media Queries

Support CodeSnail

If you appreciate my work, or if it has helped you along your journey. It would mean a lot to me if you could write a message on my wall and share a cup of coffee (or tea) with me.

Buy Me A Coffee

Related Articles

Leave a Comment

Copy link
Powered by Social Snap