Flexbox is a module, which means its has its own complex set of parts that work together to create something. It has its own terminology specific to the module. Each term has its own property and some even have sub-terms that alter their respected property. These terms went through a terminology naming process to properly correlate their name to their attributes. For example, the term "flexbox" was renamed to "flex container". The term flex container makes more sense because the flex container contains flex items. Describing the property is the main goal of the term's names. These terminology changes were done through messages by individuals in the CSS Working Group. Below are the definitions for all flexbox terms. With each definition there is a codepen to demonstrate how each term would be used in HTML/CSS. Some codepens have a result to visualize the term's properties.
The basic components of the Flexible Box Layout Module are flexbox items and flexbox containers. The different Flexbox terms/properties are set on the Flexbox container (parent element) or Flexbox item (child element). Child elements remain within parent elements.
'display' is not a property specific to flexbox and instead is a CSS property. In general it defines the type of rendering box used for an element. In the case of flexbox, it defines a flex container; inline or block depending on the given value. Thus allowing a flex context for all of its direct children. The codepen shows how display specifies flexbox as its rendering box.
See the Pen flex display by Anna Irish (@AnnaIrish) on CodePen.
Defines the direction flex items are placed in the flex container. Flexbox is a single-direction layout concept. Flex items have primarily horizontal rows or vertical columns. The four options for flex-direction are row | row-reverse | column | column reverse. row and row-reverse are dependent on the writing mode.
This places the flex items horizontally in order from left to right.
See the Pen flex-direction row by Anna Irish (@AnnaIrish) on CodePen.
This places the flex items in reverse order than they are coded; instead of being ordered left to right they will be ordered right to left.
See the Pen flex-direction: row-reverse by Anna Irish (@AnnaIrish) on CodePen.
This places the flex items vertically in order from top to bottom.
Just like row-reverse the flex items are ordered in the opposite direction. So, instead of top to bototm they are bottom to top.
By default, flex items are single-lined. 'flex-wrap' allows the items to wrap as needed meaning the some flex items may move to a new line. The direction in which the new lines are stacked can also be determined. There are three option for flex-wrap: nowrap | wrap | wrap-reverse.
If flex-wrap is defined as none, then flex items will not move to a new row when the browser is minimized. They will remain on one line.
To see how flex-wrap works bring in the sides of your web browser until the flex items wrap to a new row. When just defining flex-wrap: wrap, the flex items will stay in order from left to right.
See the Pen flex-wrap by Anna Irish (@AnnaIrish) on CodePen.
wrap-reverse is similar to row-reverse and column-reverse. The flex items will be in reverse order when they wrap.
This is the shorthand for flex-direction and flex-wrap properties, which when combined define the flex container's main and cross axes. The default for flex-flow is row nowrap. flex-flow's formal syntax is <flex-direction> || <flex-wrap> meaning when defining flex-flow, flex-direction is defined before flex-wrap.
See the Pen flex-flow by Anna Irish (@AnnaIrish) on CodePen.
Defines the alignment along the main axis. Flexbox's goal is to fill the extra space on a page. This property helps distribute free space left over when either all the flex items on a line are inflexible or are flexbile but have reached their maximum size. There are five ways to justify content: flex-start | flex-end | center | space-between | space-around. The navigation bar uses center and space-between.
See the Pen justify-content by Anna Irish (@AnnaIrish) on CodePen.
Codepen by: Hugo Giraudel
This is the default. flex items are positioned toward the main start, meaning they are justified to the left. (Red Boxes)
The flex items are packed to the main end line, which means they are justified to the right.(Yellow Boxes)
The flex items are centered along the line (main axis). (Blue Boxes)
The flex items are evenly distributed along the line. The first item is on the start line (all the way to the left) and the last item is on the end line (all the way to the right). (Green Boxes)
The items are evenly distributed on the line with equal space around them. Visually, the spaces are not equal because all items have the same space on both sides. Items may be of different sizes to begin with and this is taken into account. (Pink Boxes)
Defines the default behaviour for how flex items are laid out along the cross axis on the current line.
Syntax:
See the Pen align-items syntax by Anna Irish (@AnnaIrish) on CodePen.
Example:
See the Pen align-items by Anna Irish (@AnnaIrish) on CodePen.
Codepen by: Hugo Giraudel
Aligns content at the top of the page or cross-start line. (Red Boxes)
Aligns content at the bottom of the page or cross-end line. (Yellow Boxes)
Aligns content at the center of the page; they are centered at the cross-axis. (Blue Boxes)
Aligns items as their baseline is aligned. (Green Boxes)
Stretches items to fill container with respect to max/min width. (Pink Boxes)
Aligns a flex container's lines within where there is extra space in the cross-axis. This property has no effect when there is only one line of flex items.
Syntax:
See the Pen align-content syntax by Anna Irish (@AnnaIrish) on CodePen.
Example:
See the Pen align-content by Anna Irish (@AnnaIrish) on CodePen.
Codepen by: Hugo Giraudel
The lines are packed to the start of the container. (Red Box)
The lines are packed to the end of the container. (Yellow Box)
The lines are packed to the center of the container. (Blue Box)
The lines are evenely distributed. The first line is at the start of the container and the last line is at the end. (Green Box)
The lines are evenly distributed with equal space between them. (Pink Box)
The lines stretch to take up the remaining space. (Brown Box)
Allows the default alignment (or the one specified by 'align-items') to be overridden for individual flex items.
See the Pen align-self by Anna Irish (@AnnaIrish) on CodePen.
Controls the order in which flex items appear in the flex container.
See the Pen order by Anna Irish (@AnnaIrish) on CodePen.
Defines the ability for a flex item to grow if necessary. Accepts unitless value that serves as a proportion and dictates what amount of the available space inside the flex container the items should take up.
See the Pen flex-grow by Anna Irish (@AnnaIrish) on CodePen.
Codepen by: Hugo Giraudel
Defines ability of a flex item to shrink if necessary.
See the Pen flex-shrink by Anna Irish (@AnnaIrish) on CodePen.
Codepen by: Hugo Giraudel
flex-basis- Defines the default size of an element before the remaining space is distributed.
Syntax:
See the Pen flex-basis syntax by Anna Irish (@AnnaIrish) on CodePen.
Shorthand for 'flex-grow', 'flex-shrink', and 'flex-basis' combined. Shorthand is recommended because it sets the other values intelligently.
Syntax:
See the Pen flex syntax by Anna Irish (@AnnaIrish) on CodePen.
Example:
See the Pen flex example layout by Anna Irish (@AnnaIrish) on CodePen.
Codepen by: Hugo Giraudel