Nosa Obaseki Front-end dev currently building amazing products @theflutterwave šŸ¼šŸ‡³šŸ‡¬

Flexing with CSS Flexbox

3 min read 1070

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;

  1. Flex Container
  2. 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.

Creating a Flex container

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.

Example showing all the different value the align-items property takes

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.

Showcasing Justify-content values

flex-wrap

The flex-wrap property specifies whether the flex items should break to the next line or not.



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.

Flex-wrap with it’s values

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.

Align content with all it’s accepted values

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-direction example showcasing the various values

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:


.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.

Example showing how order for flex items work

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.

Align-self Flex Property

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 basis showing auto, 200px & 40%

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-grow with its values

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.

Example showing Flex-shrink

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 — .


Nosa Obaseki Front-end dev currently building amazing products @theflutterwave šŸ¼šŸ‡³šŸ‡¬

Leave a Reply