Flex Box

MMP 350 > Week 9

Flex box is used to layout elements within a container so that they adapt to take up the available space.

While CSS Grid is used for imposing a layout on the entire webpage, flex box is used to create a flexible or responsive layout in one section with multiple elements.

Flex box can be used for horizontally or vertically oriented layouts.

A flex box grid is comprised of two parts, the container and the items within it.

One set of rules is used to set up the container, or parent, while rules are added to invidividual items, or children, to determine their behavior.

flex container

Elements with display: flex will attempt to fill the available space with the content of the child elements.

Look at this menu for example.

<div class="menu">
	<div class="menu-item">Home</div>
	<div class="menu-item">Profile</div>
	<div class="menu-item">About</div>
	<div class="menu-item">Users</div>
</div>

.menu { display: block; }

The child elements can be aligned to the space using the justify-content rule.

.menu { justify-content: flex-start; }

align-items is used to determine the alignment of the children in the opposing axis (in this case vertical).

.menu { align-items: flex-start; }

flex-wrap determines whether or not content will wrap to a new column or row when it overflows the space of the parent element.

.menu { flex-wrap: nowrap; }

align-content is used to determine the alignment of all the content as a group within the parent container.

.menu { align-content: flex-start; }

Most of the time Flex Box is used to layout items in horizontal space, but all of the same rules can be applied to a vertical layout by changing the flex-direction. The default is row, which distributes elements left to right in the layout. column distributes elements from top to bottom.

.menu { flex-direction: row; }

With flex-direction: column; all of the rules apply, but in the opposite direction.

.menu { 
	flex-direction: column;
	flex-wrap: nowrap; 
	justify-content: flex-start; 
	align-items: flex-start; 
	align-content: flex-start; 
}

flex items

Flex Box rules can also apply to individual items within the children, although it is not necessary to set these rules for the flex box to work.

flex-grow specifies how much space a menu item can take up in a layout relative to other menu items. An item with the value 2 will get twice as much space as an item with the value 1, if it's available.

.menu-item { flex-grow: 1; }
#home { flex-grow: 1; }

flex-basis specifies the default size of an element before space is distributed among all the elements. The default is auto and any of the basic CSS units can be used, such as px, em or %.

.menu-item { flex-basis: auto; }
#home { flex-basis: auto; }

flex-order specifies the order of an item. By default they are ordered by the order in the HTML document, but flex-order can be used to adjust the order.

Elements with the same order number will appear in the order of the HTML document as well. If you have 4 elements with orders 2 1 1 1, they will appear as 1 1 1 2.

.menu-item { order: 1; }
#home { order: 1; }

align-self is used to change the alignment of one item.

.menu-item { align-items: flex-start; }
#home { align-self: auto; }