DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Flexbox & Properties - Explained
Dhairya Shah
Dhairya Shah

Posted on • Updated on • Originally published at snowbit-blog.vercel.app

Flexbox & Properties - Explained

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode
  • 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;
}
Enter fullscreen mode Exit fullscreen mode
  • 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;
}
Enter fullscreen mode Exit fullscreen mode

flex-shrink

  • It defines the ability for flex item to shrink accordingly
.item {
  flex-shrink: 3; /* default 1 */
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

order

.item {
  order: 5; /* default is 0 */
}
Enter fullscreen mode Exit fullscreen mode

Top comments (3)

Collapse
shollytemmy profile image
bunyameen

Thanks for sharing this it's really helpful

Collapse
leodarpan profile image
DARPAN ANEJA

Very helpful!

Collapse
dhairyashah profile image
Dhairya Shah Author

I am glad that it helped you πŸ™‚

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.