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

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 967,611 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
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

Oldest comments (3)

Collapse
 
leodarpan profile image
DARPAN ANEJA

Very helpful!

Collapse
 
dhairyashah profile image
Dhairya Shah Author

I am glad that it helped you πŸ™‚

Collapse
 
shollytemmy profile image
bunyameen

Thanks for sharing this it's really helpful

🌚 Life is too short to browse without dark mode