TECHY360
Everything You Need To Know About Tech

What is flexbox and how it works

0 8

In this article, we will take a closer look at what actually happens when a rule is added display: flexto a stylesheet.

Flex container please!

To use flexboxes, you must first create a flex container. For this, an instruction is used display: flex.

See the Pen Smashing Flexbox Series 1: display: flex; by TECHY360 (@tecyguy) on CodePen.dark

What does it really mean display: flex. In the Display Module Level 3 specification, each property value is display described as a combination of two behaviors: internal and external. When we install display: flex, it really means display: block flex. That is, the external display type of the container block, and it behaves like a regular block element in a normal stream. The internal display type is flex, so its direct descendants adhere to the rules of flex layout.

You can also determine the type of display inline-flexthat will mean display: inline flex, that is, the element itself will behave as a lowercase, but inside nothing will change. Children of an inline-flex container behave exactly like block-flex children.

See the Pen Smashing Flexbox Series 1: display: inline-flex; by TECHY360 (@tecyguy) on CodePen.dark

Rows or columns?

We have decided on the container, now let’s talk about some starting values. If you do not set any additional properties, then the flex elements line up in a row. This is because of the default value for a property flex-directionis row – series.

The property flex-directionsets the direction of the main axis of the container. Other meanings that it may take:

  • column
  • row-reverse
  • column-reverse

The value row forces the elements to line up one after another (as in the HTML code). In fact, the series behaves like a regular line, going from left to right. The start line in the specification is called  main-start:

If you use a value column, the elements will form a column that goes from top to bottom. This is a normal flow of blocks in a document. Respectively main-startmoves up.

row-reverseswaps main-startand main-end places, and the elements line up in the reverse order.

columnn-reversedoes the same thing. It is important to remember that these values do not change the order of the elements, although we see just that. They change the place of origin of flow – main-start. Thus, the elements are arranged in the reverse order, but this is only due to the fact that they start from the other end of the container.

This effect is purely visual. No matter how the elements are placed on the screen, the order declared in the code is preserved and it will be used by screen readers.

Two axis

We have already revealed an important feature of the flexbox system: the ability to switch the main axis from row to column. In flexbox models, a lot depends on which axis you are working with.

The main axis that defines flex-direction, we have already seen. The transverse axis is another dimension. If installed  flex-direction: row, then the main axis goes horizontally, and the transverse – vertically. When  flex-direction: column  – vice versa. But it’s not that simple!

In the Flexbox model, rows do not always go from left to right, and columns do not go from bottom to top.

Letter direction

English (like Russian) has a horizontal direction of writing. This means that the flexbox row corresponds to a regular horizontal row. In this case, it main-startwill be on the left – where in English (and Russian) sentences begin.

If you work with the Arabic language (the direction of writing is from right to left), then the line (and with it the flexbox row) will begin on the right:

See the Pen Smashing Flexbox Series 1: row with rtl text by TECHY360 (@tecyguy) on CodePen.dark

In languages ​​with a vertical direction of writing, the lines go from top to bottom, and flexbox rows too. Try adding a property to the flex container writing-mode: vertical-lrand set it  flex-direction: row — you get a vertical column of elements.

See the Pen Smashing Flexbox Series 1: row with a vertical writing mode by TECHY360 (@tecyguy) on CodePen.dark

Thus, the row can go horizontally, left or right, as well as vertically from above. And it’s still flex-direction: row, even if it’s hard for us, accustomed to horizontal text, to understand it!

This is a row dimension, and there is also a block dimension. It corresponds to how paragraphs are placed in the text. In English, Russian and Arabic – from top to bottom. You can position flex elements in this dimension using values  columnor column-reverse for a property flex-direction.

In the vertical direction of writing, the block measurement is horizontal. If you create a column in mode vertical-lr, the elements will be displayed from left to right:

See the Pen Smashing Flexbox Series 1: column in vertical-lr writing mode by TECHY360 (@tecyguy) on CodePen.dark

Regardless of how the blocks are displayed, if you are working with a value column, you are working in a block dimension.

Related Posts
1 of 8

It is very important to understand that the location of flex elements is determined by the direction of writing in a particular language.

Remember the following:

  • flex-direction: row
    • main axis – line measurement
    • main-start – a place where the sentence begins
    • lateral axis – block measurement
  • flex-direction: column
    • main axis – block measurement
    • main-start – the place where the blocks begin
    • lateral axis – inline measurement

Initial alignment

During installation  display: flex, other things happen, such as alignment of elements.

Note:
Although the alignment properties appeared in the Flexbox specification, they will eventually be replaced by the Box Alignment specification.

Main axis alignment

The default value justify-content: flex-start.

.container {
    display: flex;
    justify-content: flex-start;
}

Because of this, flex elements are placed from the beginning of the flex container, and if specified row-reverse, from the end.

When you see the alignment property that begins with justify-, be aware that it applies to the main flex axis.

Other possible values justify-content:

  • flex-end;
  • center;
  • space-around;
  • space-between;
  • space-evenly (added to Box Alignment).

This property allocates free space if any. But if the flex container is already tightly packed, it justify-contentdoes nothing at all.

You can see this if you switch flex-directionto the value column. If you do not specify the height specifically, then there is no free space on the main axis, so the installation justify-content: space-betweenwill not work. If you increase the height, the effect is visible:

See the Pen Smashing Flexbox Series 1: column with a height by TECHY360 (@tecyguy) on CodePen.dark

Cross Alignment

Elements in a single-line container are also aligned along the transverse axis with respect to each other. In the following example, one of the blocks contains more content than all the others. Something tells others to stretch to the same height. This is a property align-itemsthat has an initial value stretch:

See the Pen Smashing Flexbox Series 1: align-items by TECHY360 (@tecyguy) on CodePen.dark

If you see the alignment property that starts with align-, know that it deals with the transverse axis. Other values align-items:

  • flex-start;
  • flex-end;
  • center;
  • baseline;

If you do not want the elements to stretch, set align-items: flex-startand they will align at the beginning of the transverse axis.

See the Pen Smashing Flexbox Series 1: align-items: flex-start by TECHY360 (@tecyguy) on CodePen.dark

Initial values ​​for flex elements

Finally, flex elements have the following default values:

  • flex-grow: 0
  • flex-shrink: 0
  • flex-basis: auto

This means that they do not stretch to occupy all available space along the main axis. If set to a flex-growpositive value, then the elements will be able to grow and take up more space.

They can also be compressed if the property flex-shrinkhas a positive value. If the container is too small, the blocks will shrink to fit in it. This is a logical behavior, because usually we want the elements to remain inside and not overwhelm their parent.

flex-basisthe default value is auto, which means “wide enough to accommodate content” Here’s what the layout will look like if one of the flex elements has more content than the others:

See the Pen Smashing Flexbox Series 1: initial values of flex items by TECHY360 (@tecyguy) on CodePen.dark

This is the flexibility of the Flexbox system in action. If it flex-basisis equal autoand the size of the element is not specified, then its width is equal max-contentto the maximum width of the content. Details of the free space allocation mechanism can be found in the specification.

Flexbox ultimately allows you to intelligently allocate space. Instead of reducing all the blocks evenly and not getting enough space to get a very tall element with a couple of words in each line, this element is allocated more space for placement.

Summary

Flexible flex-layouts support different directions of writing and allow you to align the elements on the main and transverse axis, as well as compress and stretch them, redistributing the space of the container. The flex model understands how large the content is and tries to display it as adaptively as possible.

Get real time updates directly on you device, subscribe now.

Comments
Loading...

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More