Flexbox also known as flexible box is a type of layout model in CSS that makes it super easy to design responsive layouts.
The whole idea behind the Flexbox layout model is to allow elements to be laid out in any direction, flex their size to either fill up unused space or shrink to avoid overflowing their parent element, either horizontally or vertically.
To truly be able to flex with Flexbox, we have to understand how it works.
Letās break it down into its properties into two namely;
- Flex Container
- Flex Items
Flex Container
This is the parent html element that houses the items you want to lay out.
To use any of the flex properties, this container has to be created.
Itās what creates the context that allows every other flex properties to work.
See the Pen
Flex 1 by Obaseki Nosa (@c0depanda)
on CodePen.
align-items
This allows you to align the items in the flex container vertically, regardless of the height of the item with respect to their flex container or each other.
The values it accepts are: flex-start | flex-end | center | baseline | stretch
See the Pen
Flex – align-items by Obaseki Nosa (@c0depanda)
on CodePen.
justify-content
This is the opposite of align-items, it aligns its item horizontally regardless of the width of the item with respect to their container or each other.
Values: flex-start | flex-end | center | space-between | space-around | space-evenly
See the Pen
justify content by Obaseki Nosa (@c0depanda)
on CodePen.
flex-wrap
The flex-wrap property specifies whether the flex items should break to the next line or not.
Learn more āBy default all flex items will try to fit in a single line, but this property tells the browser to break them into another line when they become way too many to fit in a single line.
This line we speak of is also known as a Flex line.
Values: nowrap | wrap | wrap-reverse
See the Pen
Flex Wrap by Obaseki Nosa (@c0depanda)
on CodePen.
align-content
This property modifies the behavior of the flex-wrap property.
It essentially behaves like the align-items property, only that it aligns the flex lines instead of the flex items.
To make this property work, flex-wrap: wrap has to be set on the flex container and the flex lines have to be more than one.
Values: flex-start | flex-end | center | space-between | space-around | stretch
See the Pen
align-content by Obaseki Nosa (@c0depanda)
on CodePen.
flex-direction
This defines which direction the browser should stack the Flex items i.e vertically or horizontally.
Values: row | row-reverse | column | column-reverse
See the Pen
flex-direction by Obaseki Nosa (@c0depanda)
on CodePen.
flex-flow
This is a shorthand for flex-direction and flex-wrap so instead of writing the below;
.container {
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
you can just do this;
More great articles from LogRocket:
- Don't miss a moment with The Replay, a curated newsletter from LogRocket
- Learn how LogRocket's Galileo cuts through the noise to proactively resolve issues in your app
- Use React's useEffect to optimize your application's performance
- Switch between multiple versions of Node
- Discover how to animate your React app with AnimXYZ
- Explore Tauri, a new framework for building binaries
- Advisory boards arenāt just for executives. Join LogRocketās Content Advisory Board. Youāll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.
.container {
display: flex;
flex-flow: column wrap;
}
Flex Items
This are the direct children of a Flex container and just like the Flex container, they also have properties that can be applied to them.
orders
This property allows you to change the order in which the Flex items are arranged. i.e according to the HTML structure source code.
Flex items that are within the same container are laid out in ascending order based on the order value, while flex items that have the same order value are laid out in the order they appear in the source code.
Values: <integers> (positive or Negative)
See the Pen
Order by Obaseki Nosa (@c0depanda)
on CodePen.
align-self
As the name implies, the property allows you to align the selected flex item vertically inside its flex container.
It basically works the same way align-items works, only that itās meant for an individual Flex item.
This is useful for when you only want to align a single Flex item instead of all the Flex items in a Flex container.
Note: This property overrides the flex containerās align-items property.
Values: auto | flex-start | flex-end | center | baseline | stretch
See the Pen
align-self by Obaseki Nosa (@c0depanda)
on CodePen.
flex-basis
This property sets the initial size of the selected flex item. Itās very similar to the way width property works.
The flex-basis property accepts values in length unit i.e px, em, rem, percentage etc. It also accepts auto which basically decides how the flex items would be distributed based on if a flex-grow is set or based off the content size of the flex item.
See the Pen
flex-basis by Obaseki Nosa (@c0depanda)
on CodePen.
flex-grow
This property gives flex items magical powers such that they can grow to fill up a flex container or take more space than other elements in the container.
It basically specifies what amount of space inside the flex container the item should take up.
Values: <integers> (positive)
See the Pen
flex-grow by Obaseki Nosa (@c0depanda)
on CodePen.
flex-shrink
This is the opposite of flex-grow which basically lets the flex item shrink when necessary. I.e Other items in the flex-container are trying to take more space.
Values: <integers> (positive)
See the Pen
flex-shrink by Obaseki Nosa (@c0depanda)
on CodePen.
Based on the example above, there are 5 Flex items with flex-basis: 200px set on them which makes is 1000px in total.
The Flex container on the other hand has been set to 400px which is smaller than the flex items but because flex-wrap defaults to nowrap we would have all the items trying to fit the Flex container thus distributing theirselves evenly.
Once the flex-shrink values are set on this items they would start to adjust based on the values.
The higher the flex-shrink value is the more it would shrink compared to other Flex items.
flex
This is a shorthand property for flex-growĀ , flex-shrink and flex-basis but the flex-shrink and flex-basis are optional, i.e you can just set only the flex-grow and the rest will be set to their defaults.
By default the values are set to flex: 0 1 auto i.e flex-grow: 0Ā , flex-shrink: 1 and flex-basis: auto.
Found this article helpful? Donāt forget to clap and shareĀ š
Is your frontend hogging your users' CPU?
As web frontends get increasingly complex, resource-greedy features demand more and more from the browser. If youāre interested in monitoring and tracking client-side CPU usage, memory usage, and more for all of your users in production, try LogRocket.
https://logrocket.com/signup/LogRocket is like a DVR for web and mobile apps, recording everything that happens in your web app, mobile app, or website. Instead of guessing why problems happen, you can aggregate and report on key frontend performance metrics, replay user sessions along with application state, log network requests, and automatically surface all errors.
Modernize how you debug web and mobile apps ā Start monitoring for free.
