So What You Doing Again I Just Flex

Bones concepts of flexbox

The Flexible Box Module, usually referred to as flexbox, was designed as a one-dimensional layout model, and equally a method that could offering space distribution between items in an interface and powerful alignment capabilities. This article gives an outline of the main features of flexbox, which we volition be exploring in more particular in the rest of these guides.

When nosotros describe flexbox as being one dimensional we are describing the fact that flexbox deals with layout in one dimension at a time — either as a row or as a column. This can be contrasted with the ii-dimensional model of CSS Grid Layout, which controls columns and rows together.

The ii axes of flexbox

When working with flexbox you need to think in terms of two axes — the master centrality and the cross axis. The main axis is defined by the flex-direction property, and the cantankerous axis runs perpendicular to it. Everything we practise with flexbox refers dorsum to these axes, then it is worth understanding how they work from the outset.

The main axis

The main axis is defined by flex-management, which has iv possible values:

• row
• row-contrary
• cavalcade
• column-reverse

Should you choose row or row-contrary, your main axis will run along the row in the inline direction.

Choose cavalcade or cavalcade-reverse and your main axis will run from the summit of the folio to the bottom — in the block management.

The cross centrality

The cross axis runs perpendicular to the main axis, therefore if your flex-direction (main axis) is set to row or row-opposite the cross axis runs downwards the columns.

If your principal axis is cavalcade or column-reverse then the cross centrality runs along the rows.

Offset and end lines

Another vital area of agreement is how flexbox makes no supposition well-nigh the writing mode of the document. In the by, CSS was heavily weighted towards horizontal and left-to-right writing modes. Modern layout methods comprehend the range of writing modes and so we no longer assume that a line of text will kickoff at the height left of a document and run towards the right manus side, with new lines actualization i under the other.

You tin can read more about the relationship betwixt flexbox and the Writing Modes specification in a later article; however, the post-obit clarification should help explicate why we do not talk about left and right and top and lesser when nosotros describe the direction that our flex items menstruation in.

If the flex-management is row and I am working in English, then the get-go edge of the main axis will exist on the left, the end border on the right.

If I were to work in Arabic, then the get-go edge of my master axis would exist on the right and the end edge on the left.

In both cases the starting time edge of the cantankerous axis is at the top of the flex container and the end border at the bottom, as both languages have a horizontal writing way.

After a while, thinking most start and end rather than left and right becomes natural, and will be useful to yous when dealing with other layout methods such as CSS Grid Layout which follow the same patterns.

The flex container

An area of a document laid out using flexbox is called a flex container. To create a flex container, we set the value of the area's container's display holding to flex or inline-flex. Equally before long equally we exercise this the direct children of that container go flex items. As with all properties in CSS, some initial values are defined, and so when creating a flex container all of the contained flex items will behave in the following mode.

• Items brandish in a row (the flex-direction property's default is row).
• The items get-go from the start edge of the chief axis.
• The items do not stretch on the main dimension, but can shrink.
• The items volition stretch to fill the size of the cantankerous axis.
• The flex-basis property is gear up to auto.
• The flex-wrap property is ready to nowrap.

The result of this is that your items will all line upwards in a row, using the size of the content as their size in the master centrality. If in that location are more items than tin can fit in the container, they volition not wrap only will instead overflow. If some items are taller than others, all items will stretch forth the cantankerous axis to fill its full size.

You lot can come across in the live example below how this looks. Try editing the items or adding additional items in guild to test the initial behavior of flexbox.

Irresolute flex-direction

Adding the flex-management property to the flex container allows us to change the direction in which our flex items display. Setting flex-management: row-reverse volition keep the items displaying along the row, however the outset and end lines are switched.

If we change flex-direction to column the primary centrality switches and our items at present display in a column. Ready cavalcade-reverse and the offset and end lines are again switched.

The live example below has flex-direction fix to row-contrary. Try the other values — row, cavalcade and cavalcade-reverse — to run across what happens to the content.

Multi-line flex containers with flex-wrap

While flexbox is a ane dimensional model, it is possible to crusade our flex items to wrap onto multiple lines. In doing so, you should consider each line as a new flex container. Whatever infinite distribution will happen beyond that line, without reference to the lines on either side.

To crusade wrapping behavior add the property flex-wrap with a value of wrap. Now, should your items be too large to all display in one line, they will wrap onto some other line. The live sample beneath contains items that have been given a width, the total width of the items being too wide for the flex container. As flex-wrap is set to wrap, the items wrap. Set it to nowrap, which is besides the initial value, and they will instead shrink to fit the container because they are using initial flexbox values that allows items to compress. Using nowrap would cause an overflow if the items were not able to compress, or could not shrink small enough to fit.

Find out more almost wrapping flex items in the guide Mastering Wrapping of Flex Items.

The flex-period shorthand

You can combine the two properties flex-management and flex-wrap into the flex-menstruation shorthand. The first value specified is flex-direction and the second value is flex-wrap.

In the live case beneath try changing the first value to ane of the allowable values for flex-management - row, row-reverse, cavalcade or column-reverse, and also change the second to wrap and nowrap.

Properties applied to flex items

To have more control over flex items we can target them directly. We do this by way of three properties:

• flex-grow
• flex-shrink
• flex-basis

We will take a brief expect at these properties in this overview, and yous tin can gain a fuller understanding in the guide Decision-making Ratios of Flex Items on the Main Axis.

Earlier we can make sense of these backdrop we need to consider the concept of bachelor infinite. What we are doing when we change the value of these flex backdrop is to change the way that bachelor space is distributed amongst our items. This concept of available space is also important when nosotros come to await at aligning items.

If we have three 100 pixel-broad items in a container which is 500 pixels wide, then the space nosotros need to lay out our items is 300 pixels. This leaves 200 pixels of bachelor infinite. If we don't change the initial values then flexbox will put that space later the terminal particular.

If nosotros instead would like the items to grow and fill up the space, then we need to have a method of distributing the leftover space between the items. This is what the flex properties that we utilize to the items themselves, will exercise.

The flex-basis property

The flex-footing is what defines the size of that particular in terms of the infinite it leaves equally bachelor space. The initial value of this belongings is auto — in this example the browser looks to see if the items accept a size. In the example in a higher place, all of the items accept a width of 100 pixels and so this is used equally the flex-basis.

If the items don't have a size so the content'due south size is used equally the flex-basis. This is why when nosotros merely declare brandish: flex on the parent to create flex items, the items all move into a row and have only as much space as they demand to brandish their contents.

The flex-grow property

With the flex-grow property set to a positive integer, flex items tin grow forth the primary axis from their flex-footing. This will cause the particular to stretch and take up any available space on that axis, or a proportion of the available space if other items are allowed to grow too.

If we gave all of our items in the example in a higher place a flex-grow value of i then the available space in the flex container would be equally shared between our items and they would stretch to fill the container on the chief centrality.

The flex-abound property can exist used to distribute space in proportion. If nosotros requite our first item a flex-grow value of 2, and the other items a value of 1 each, 2 parts of the available space will exist given to the first particular (100px out of 200px in the case of the example above), 1 part each the other two (50px each out of the 200px full).

The flex-shrink property

Where the flex-grow property deals with adding infinite in the main axis, the flex-shrink property controls how it is taken away. If we exercise non have enough space in the container to lay out our items, and flex-shrink is set to a positive integer, then the detail can go smaller than the flex-footing. As with flex-grow, dissimilar values tin can be assigned in order to cause one item to shrink faster than others — an particular with a higher value gear up for flex-shrink will compress faster than its siblings that have lower values.

The minimum size of the item will be taken into account while working out the bodily amount of shrinkage that will happen, which ways that flex-shrink has the potential to appear less consistent than flex-grow in behavior. We'll therefore take a more detailed expect at how this algorithm works in the article Decision-making Ratios of items forth the main axis.

Annotation: These values for flex-abound and flex-shrink are proportions. Typically if nosotros had all of our items set up to flex: one ane 200px and then wanted ane item to grow at twice the charge per unit, we would set that item to flex: 2 ane 200px. Even so you could also use flex: 10 1 200px and flex: xx 1 200px if you wanted.

Shorthand values for the flex properties

You volition very rarely meet the flex-abound, flex-compress, and flex-basis backdrop used individually; instead they are combined into the flex shorthand. The flex autograph allows you to set the iii values in this order — flex-grow, flex-shrink, flex-basis.

The live example below allows you to examination out the different values of the flex shorthand; think that the beginning value is flex-grow. Giving this a positive value means the detail can abound. The second is flex-shrink — with a positive value the items tin can shrink, but just if their total values overflow the main axis. The final value is flex-footing; this is the value the items are using every bit their base value to abound and shrink from.

There are also some predefined autograph values which comprehend nearly of the use cases. Yous will often see these used in tutorials, and in many cases these are all you will demand to use. The predefined values are as follows:

• flex: initial
• flex: machine
• flex: none
• flex: <positive-number>

Setting flex: initial resets the detail to the initial values of Flexbox. This is the aforementioned as flex: 0 one auto. In this instance the value of flex-grow is 0, and then items volition not grow larger than their flex-basis size. The value of flex-compress is i, and then items can compress if they need to rather than overflowing. The value of flex-ground is auto. Items will either use whatever size assail the item in the main dimension, or they will get their size from the content size.

Using flex: auto is the same as using flex: one 1 car; everything is equally with flex:initial but in this example the items tin can grow and make full the container too as shrink if required.

Using flex: none will create fully inflexible flex items. It is as if you wrote flex: 0 0 auto. The items cannot grow or shrink but will be laid out using flexbox with a flex-ground of motorcar.

The autograph yous ofttimes run across in tutorials is flex: 1 or flex: 2 and and then on. This is as if yous used flex: 1 1 0 or flex: 2 1 0 and then on, respectively. The items can abound and shrink from a flex-basis of 0.

Try these autograph values in the live example below.

Alignment, justification and distribution of free space betwixt items

A cardinal characteristic of flexbox is the ability to align and justify items on the primary- and cross-axes, and to distribute space between flex items. Note that these properties are to be fix on the flex container, non on the items themselves.

align-items

The align-items property will align the items on the cross centrality.

The initial value for this property is stretch and this is why flex items stretch to the height of the flex container by default. This might be dictated past the meridian of the tallest item in the container, or past a size set on the flex container itself.

You could instead set marshal-items to flex-start in order to brand the items line up at the start of the flex container, flex-end to align them to the stop, or center to marshal them in the center. Try this in the alive example — I have given the flex container a height in order that y'all can see how the items tin can be moved around within the container. See what happens if you ready the value of align-items to:

• stretch
• flex-start
• flex-end
• center

justify-content

The justify-content property is used to align the items on the main axis, the direction in which flex-direction has set the flow. The initial value is flex-showtime which will line the items upward at the start edge of the container, just you could also set the value to flex-finish to line them upward at the end, or middle to line them upward in the center.

Y'all can likewise use the value space-between to have all the spare space after the items have been laid out, and share it out evenly betwixt the items so in that location volition be an equal amount of infinite betwixt each detail. To crusade an equal amount of space on the right and left of each item use the value space-around. With infinite-around, items have a one-half-size space on either end. Or, to cause items to have equal space around them use the value space-evenly. With space-evenly, items accept a full-size space on either end.

Effort the following values of justify-content in the live instance:

• flex-beginning
• flex-end
• centre
• space-around
• space-between
• space-evenly

In the article Adjustment Items in a Flex Container we volition explore these properties in more depth, in order to accept a meliorate understanding of how they work. These simple examples however will be useful in the majority of utilize cases.

Side by side steps

henryanowid.blogspot.com

Source: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

Share this post