Flexbox in CSS

• Flexbox is a one-dimensional layout method for arranging items in rows or columns

Why to use Flexbox?

• For a long time, the only reliable cross-browser compatible tools available for creating CSS layouts were features like floats and positioning.

• These work, but in some ways they're also limiting and frustrating.

The following simple layout designs are either difficult or impossible to achieve with such tools

• Vertically centering a block of content inside its parent.

• Making all the children of a container take up an equal amount of the available width/height, regardless of how much width/height is available.

• Making all columns in a multiple-column layout adopt the same height, even if they contain a different amount of content.

Flexbox example

• You'll see that we have a <header> element with a top level heading inside it and

• a <section> element containing three <article>s. We're going to use these to create a fairly standard three column layout.

• This causes the element to become a flex container and its children to become flex items. The result of this should be something like so:

Note

• you can use a display value of inline-flex if you wish to lay out an element's children as flex items, but have that element behave like an inline element.

The flex model

• The main axis is the axis running in the direction the flex items are laid out in (for example, as rows across the page, or columns down the page.) The start and end of this axis are called the main start and main end.

• The cross axis is the axis running perpendicular to the direction the flex items are laid out in. The start and end of this axis are called the cross start and cross end.

• The parent element that has display: flex set on it (the <section> in our example) is called the flex container.

• The items laid out as flexible boxes inside the flex container are called flex items (the <article> elements in our example).

Columns or rows? in flexbox

• Flexbox provides a property called flex-direction that specifies which direction the main axis runs (which direction the flexbox children are laid out in).

• By default this is set to row, which causes them to be laid out in a row in the direction your browser's default language works in (left to right, in the case of an English browser).

Wrapping

• One issue that arises when you have a fixed width or height in your layout is that eventually your flexbox children will overflow their container, breaking the layout.

• Here we see that the children are indeed breaking out of their container. One way in which you can fix this is to add the following declaration to your <section> rule:

flex-wrap: wrap;

• Also, add the following declaration to your <article> rule:

flex: 200px;

• We now have multiple rows. Each row has as many flexbox children fitted into it as is sensible. Any overflow is moved down to the next line. The flex: 200px declaration set on the articles means that each will be at least 200px wide.

Flexible sizing of flex items

1.

• This is a unitless proportion value that dictates how much available space along the main axis each flex item will take up compared to other flex items.

• In this case, we're giving each <article> element the same value (a value of 1), which means they'll all take up an equal amount of the spare space left after properties like padding and margin have been set.

2.

• you'll see that the third <article> takes up twice as much of the available width as the other two.

• There are now four proportion units available in total (since 1 + 1 + 2 = 4). The first two flex items have one unit each, so they each take 1/4 of the available space.

• The third one has two units, so it takes up 2/4 of the available space (or one-half).

specify a minimum size value within the flex value.

• Each flex item will first be given 200px of the available space. After that, the rest of the available space will be shared according to the proportion units

flex is a shorthand property that can specify up to three different values:

1. The unitless proportion value we discussed above. This can be specified separately using the flex-grow longhand property.

1. A second unitless proportion value, flex-shrink , which comes into play when the flex items are overflowing their container. This value specifies how much an item will shrink in order to prevent overflow.

2. The minimum size value we discussed above. This can be specified separately using the flex-basis longhand value.

Horizontal and vertical alignment

align-items controls where the flex items sit on the cross axis.

• By default, the value is stretch, which stretches all flex items to fill the parent in the direction of the cross axis. If the parent doesn't have a fixed width in the cross axis direction, then all flex items will become as long as the longest flex item. This is how our first example had columns of equal height by default.

• The center value that we used in our above code causes the items to maintain their intrinsic dimensions, but be centered along the cross axis. This is why our current example's buttons are centered vertically.

• You can also have values like flex-start and flex-end, which will align all items at the start and end of the cross axis respectively.

• You can override the align-items behavior for individual flex items by applying the align-self property to them

justify-content controls where the flex items sit on the main axis.

• The default value is flex-start, which makes all the items sit at the start of the main axis.

• You can use flex-end to make them sit at the end.

• center is also a value for justify-content. It'll make the flex items sit in the center of the main axis.

• The value we've used above, space-around, is useful — it distributes all the items evenly along the main axis with a bit of space left at either end.

• There is another value, space-between, which is very similar to space-around except that it doesn't leave any space at either end.

Ordering flex items

Flexbox also has a feature for changing the layout order of flex items without affecting the source order.

1. By default, all flex items have an order value of 0.

2. Flex items with higher specified order values will appear later in the display order than items with lower order values.

3. Flex items with the same order value will appear in their source order. So if you have four items whose order values have been set as 2, 1, 1, and 0 respectively, their display order would be 4th, 2nd, 3rd, then 1st.

4. The 3rd item appears after the 2nd because it has the same order value and is after it in the source order.