Weird Flex, but OK: A Flexbox Refresher

Weird Flex, but OK: A Flexbox Refresher

When designing certain parts of the site, I’ve often found myself using display: flex as my go-to layout module. The Flexible Box Layout Module makes it easier to design flexible responsive layout structure without using float or positioning.

Using flexbox in building complex layouts is pretty straightforward, but I often spend an unhealthy amount of time figuring out why elements don't behave behave the way I expect them to. So for those of you who are like me, let’s revisit flexbox and its basic properties with this refresher.

Parent Properties (container)

display

This defines a flex layout for the container and all its children; inline or block depending on the set value.

.container {
  display: flex; /* or 'inline-flex' for inline elements*/
}

flex-direction

This property sets how flex items are placed in the flex container defining the main axis and the direction (normal or reversed).

/* (default): left to right in ltr; right to left in rtl */
flex-direction: row;

/* right to left in ltr; left to right in rtl */
flex-direction: row-reverse;

/* same as row but vertical; top to bottom */
flex-direction: column;

/* same as row-reverse but vertical; bottom to top */
flex-direction: column-reverse;
flex-direction: row
flex-direction: row-reverse
flex-direction: column
flex-direction: column-reverse

flex-wrap

Flex items are forced onto one line by default. You can change that by using this property. If wrapping is allowed, it sets the direction that lines are stacked.

 /* Default value */
flex-wrap: nowrap;

/* flex items will wrap onto multiple lines, from top to bottom. */
flex-wrap: wrap;

/* flex items will wrap onto multiple lines from bottom to top. */
flex-wrap: wrap-reverse;
flex-wrap: nowrap
flex-wrap: wrap
flex-wrap: wrap-reverse

flex-flow

  • This is the shorthand property for flex-direction and flex-wrap

justify-content

This property defines how the browser distributes space between and around content items along the main-axis.

justify-content: flex-start; /* Pack flex items from the start */
justify-content: flex-end;   /* Pack flex items from the end */
justify-content: center;     /* Pack items around the center */
justify-content: space-between; /* Distribute items evenly
                                   The first item is flush with the start,
                                   the last is flush with the end */
justify-content: space-around;  /* Distribute items evenly
                                   Items have a half-size space
                                   on either end */
justify-content: flex-start
justify-content: flex-end
justify-content: center
justify-content: space-between
justify-content: space-around

align-items

This property defines how the browser distributes space between and around content items along the cross-axis.

align-items: flex-start; /* Pack flex items from the start */ 
align-items: flex-end; /* Pack flex items from the end */
align-items: center; /* Pack items around the center */ 
align-items: stretch; /* Stretch to fill the container */
align-items: baseline /*Items are aligned such as their baselines align*/
align-items: flex-start
align-items: flex-end
align-items: center
align-items: stretch
align-items: flex-start;
align-items: flex-end;
align-items: center;
align-items: stretch;
align-items: stret;

align-content

This property sets the distribution of space between and around content items along a flexbox's cross-axis, similar to how justify-content aligns items within the main-axis. This property has no effect on single line flex containers (i.e. ones with flex-wrap: nowrap).

align-content: flex-start; /* Pack flex items from the start */
align-content: flex-end;   /* Pack flex items from the end */
align-content: center;     /* Pack items around the center */
align-content: space-between; /* Distribute items evenly
                                 The first item is flush with the start,
                                 the last is flush with the end */
align-content: space-around;  /* Distribute items evenly
                                 Items have a half-size space
                                 on either end */
align-content: stretch;       /* Distribute items evenly
                                 Stretch 'auto'-sized items to fit
                                 the container */
align-content: flex-start;
align-content: flex-end;
align-content: center;
align-content: space-between;

Children Properties (flex items)

order

This property sets the order of an item in a flex container. Items in a container are sorted by ascending order value. The default value is 0.

.item1 {
	order: 1;
}
.item2 {
	order: 1;
}
.item3 {
	order: 2;
}
.item4 {
	order: 1;
}
.item5 {
	order: 1;
}
Since item3 has the highest order value, it is positioned towards the end of the container.

flex-grow

This property specifies how much of the remaining space in the flex container should be assigned to the item (the flex grow factor).

.item1, .item2, .item4, .item5 {
	flex-grow: 1;
}
.item3 {
	flex-grow: 2;
}
item1, item2, item4 and item5 has flex-grow: 1. item3 has flex-grow: 2. The size of item3 is twice as large.

flex-shrink

This property sets the flex shrink factor of a flex item. If the size of all flex items is larger than the flex container, items shrink to fit according to flex-shrink.

.item2, .item4, .item5 {
	flex-grow: 1;
}
.item1, .item3 {
	flex-grow: 2;
}
item2, item4 and item5 has flex-shrink: 1. item1 and item3 has flex-shrink: 2. The size of item1 and item3 is lesser.

flex-basis

This property sets the initial main size of a flex item. In cases where both flex-basis (other than auto) and width (or height in case of flex-direction: column) are set for an element, flex-basis has priority.

/* Specify <'width'> */
flex-basis: 10em;
flex-basis: 3px;
flex-basis: auto;

/* Intrinsic sizing keywords */
flex-basis: fill;
flex-basis: max-content;
flex-basis: min-content;
flex-basis: fit-content;

/* Automatically size based on the flex item’s content */
flex-basis: content;
item1 has flex-basis: 20%; and item2 has flex-basis: 70%; the other 10% takes the extra space of the container.

flex

This is the shorthand for flex-grow, flex-shrink and flex-basis combined. It is recommended that you use this shorthand property rather than set the individual properties. The shorthand sets the other values intelligently.


align-self

This property overrides a flex item's align-items value.

.container {
	align-items: flex-end;
}

.container .item3 {
	align-self: flex-start;
}

That's basically it, if you want to learn more about flexbox, there's a cool little site that teaches you all about it by playing a game. Here's the link: https://flexboxfroggy.com/ Enjoy!


Sources: