What Happens When You Create A Flexbox Flex Container? , by Rachel Andrew

In my opinion, CSS grid and Flexbox should be present at the same time to complete the web layout scheme. In fact, elastic layouts came first, because it was much easier to create grid-type systems using elastic layouts than floating systems, and we have many grid systems based on Flexbox. In fact, Flexbox’s advantage is not to build grid systems, which is why it sometimes feels like a struggle to build grid systems with Flexbox.

I’m going to start a small series of articles that will take some time to decipher Flexbox — just like I did with Grid in the past. We’ll see what Flexbox was designed for, what it really does well, and why we didn’t choose it as a layout method. This article will show what happens when we use display: Flex.

Flex container

To use an elastic layout, we need an element that acts as a Flex container. The container uses display: flex to declare:

📷See the Pen Smashing Flexbox Series 1: display: flex; by Rachel Andrew

Display: What does Flex do? In the Display Module Level 3 specification, each Display attribute value is defined to be composed of two parts: inner Display model and outer Display model. When we use display: flex, we actually define display: block flex. The external display type of the Flex container is Block, which appears as a block-level element in normal flow, and the internal display type is Flex, so the direct children of the container will participate in the elastic layout.

Of course, we can also define the Flex container using display: inline-flex, similar to the above declaration, which actually defines display: inline flex. The Flex container behaves like an inline element whose immediate children participate in the elastic layout.

📷See the Pen Smashing Flexbox Series 1: display: inline-flex; by Rachel Andrew

Understanding the external and internal display models for elements is very helpful in understanding how elements and their children behave on a page. You can apply this thinking to any other type of box: what is the behavior of this element? What about its children? The answer has to do with the external display model and the internal display model.

Rows and columns

Once the Flex container is defined, some initial values come into play. Without setting any other properties, all Flex items are arranged in a row. This is true because the initial value of Flex-direction is row.

The flex-direction property sets the main axis direction. In addition to row, the values include:

  • column
  • row-reverse
  • column-reverse

The Flex items are arranged on a line, starting at the start edge of the inline dimension, in the order of the structures that appear in the source code. In the specification, this “starting edge” is called main-start:

main-startIs at the beginning of the inline dimension

If column is used, Flex items are arranged from the beginning edge of the block Dimension to form a column.

main-startLocated at the beginning of the block dimension

If row-reverse is used, the main-start and main-end positions are reversed. As a result, Flex projects are sorted in reverse order.

main-startTerminal located in an inline dimension

Column-reverse works similarly. It is important to note that these values do not “change the order of Flex projects.” The order changes only as a representation of where Flex projects are laid out, i.e. the main-start position. As a result, Flex projects are displayed in reverse order because they start laying out along the other side of the container.

It is also important to note that the difference in the order of the Flex projects is purely visual. We simply require the Flex project to display from the end edge, in the same order as in the source code for screen readers or when you press the Tab key to switch elements.

Click Tab repeatedly above, you can observe the order of the button focus and appear in the source code in the same order, regardless of the display order.

Two axes in Flexbox

We’ve already covered a very important feature of elastic layouts: the ability to switch from rows to columns in the main axis direction. Understanding this axis switch allows us to better understand how alignment works in grid layout. Grids are two-dimensional layouts, and we can set up the alignment of Grid items on both axes in much the same way as we would in an elastic layout.

We have explained the main axis, which is the direction defined by the flex-direction attribute value. The cross axis is another dimension. If you set flex-direction: row, the main axis is along the row and the intersection axis is down the column. If you set flex-direction: column, the main axis goes down the column and the cross axis goes down the row. This is another important feature of the elastic layout that we are going to introduce. The orientation of the two axes has nothing to do with the physical dimensions of the screen. We are not talking about left-to-right rows, or top-to-bottom columns, because this is not always the case.

Writing mode

When we talked about rows and columns above, we mentioned inline and block dimensions. This article is written in English, in a horizontal writing format. That is, when you specify row for Flexbox, you get horizontal Flex items. In this case, main-start is on the left — where the English sentence begins.

In countries like Arabia, where the language is oriented from right to left, the starting edge begins on the right.

See the Pen Smashing Smashing Flexbox Series 1: row with rtl text by Rachel Andrew

When I just created a Flex container, the initial value of Flexbox indicates that Flex items are displayed from the right and aligned to the left. The beginning edge of the inline direction is where the sentence begins in the writing mode we use.

In vertical writing mode, lines are vertical because in a vertical language, lines are vertical and text is displayed vertically. We can see this effect by setting the writing-mode: vertical-lr on the Flex container. When you set Flex-direction to row, you will see the Flex project displayed vertically.

See the Pen Smashing Smashing Flexbox Series 1: row with a vertical writing mode by Rachel Andrew

Thus, rows can be horizontal, with main-start on the left or right, or vertical, with main-start at the top. When you are used to thinking horizontally, it may seem strange to see items in a Flex container arranged vertically with Flex-direction: Row set in vertical writing mode, but they are arranged in the direction of the row.

To layout Flex projects on the block dimension, set column or column-reverse for flex-direction. In English, we see Flex projects laid out from the top of the Flex container and down.

In vertical writing, block dimensions span the page, similar to how block elements are arranged in this mode. If vertical-LR is set, the block elements are arranged from left to right.

See the Pen Smashing Smashing Flexbox Series 1: column in vertical-lr writing mode by Rachel Andrew

However, regardless of the direction in which the block elements are displayed, if flex-direction sets column, the layout is on the block dimension.

Understanding that rows and columns behave in different physical directions in different writing modes is useful for understanding some of the terms in Grid and Flexbox. We didn’t mention “left to right” or “top to bottom” in Grid and Flexbox because we didn’t make any assumptions about document writing patterns. Our CSS is becoming more compatible with writing modes, and if you want to learn more about other Properties and Values that behave like this, you can read my Logical Properties and Values article.

Ok, let’s sum it up:

  • flex-direction: row
    • Spindle = inline dimension
    • main-startLocated at the beginning of a sentence in a given writing pattern
    • Cross axes = block dimensions
  • flex-direction: column
    • Spindle = block dimension
    • main-startLocated at the starting layout of the block under the given writing mode
    • Cross axes = inline dimensions

The default alignment

Something else happens after using display: Flex. I’ll talk more about alignment in a later article in this series. In this article, let’s take a look at some of the default values used with display: flex.

Note: The alignment attribute originally originated in the Flexbox specification. But as explained in the Flexbox specification, the Box Alignment specification will eventually replace these attributes defined in the Flexbox specification.

Main shaft alignment,

The initial value of context-content is flex-start, as we declare in CSS:

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

This is why Flex projects are arranged from the beginning edge of the container. Row-reverse reverses the start edge and the end edge so that the end edge becomes where the main axis starts.

When you see an attribute that begins with justify-, it controls alignment on the Flexbox spindle. Context-content operates on spindle alignment, with all Flex projects aligned at the beginning.

In addition to flex-star, precision-content values include:

  • flex-end
  • center
  • space-around
  • space-between
  • space-evently(Added in Box Alignment)

These values are used to allocate available space for the Flex container. This is why projects move and fall apart. If illustration-content: space-between is used, the available space is evenly distributed between projects, provided, of course, that there is space to allocate. If the Flex container space is too narrow (there is no extra space after all the project layout is complete), context-content does nothing.

We can set flex-direction to column. The Flex container has no space because height is not set, and precision-content: space-between does not work. If you set the height high enough, you will see the effect after all the projects are laid out, because there is still room left.

See the Pen Smashing Flexbox Series 1: column with a height by Rachel Andrew

Cross axis alignment

Flex projects can also perform cross-axis alignment on Flex containers that have only one row. This alignment controls how the boxes align on this line. In the following example, one box has more content than the others, and the others stretch to the same height as if they were notified. This is where the initial value of the align-items property stretch comes into play:

See the Pen Smashing Guide to Layout: clearfix by Rachel Andrew

When you see an attribute that starts with the align- prefix, it controls alignment on the Flexbox cross axis. Align-items operates cross axis alignment, and all Flex items are aligned within the Flex line.

In addition to stretch, align-items can also take values like:

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

If you don’t want the box to stretch to the highest height, set align-items: flex-start. Align items at the beginning edge of the cross axis.

See the Pen Smashing Flexbox Series 1: align-items: flex-start by Rachel Andrew

Initial value for the Flex project

The Flex project has an initial setup that looks like this:

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

This means that the project does not grow by default to fill the available space on the spindle. If you give flex-Grow a positive value, the project expands the remaining space.

The flex-shrink attribute disposition value of the project is a positive value of 1, indicating that it is possible to shrink. That is, when the Flex container is narrow, the project becomes as small as possible without any overflow occurring. This is a wise move, and generally speaking, we want the contents of the box not to overflow.

To get a good layout by default, the flex-basis initial value uses auto. I’ll explain the behavior of this property in a future series of articles. For now, think of it as “Big enough to fit the content.” In terms of page representation, the item with more content is allocated more space than the item with less content.

See the Pen Smashing Flexbox Series 1: initial values of flex items by Rachel Andrew

This is the flexibility that comes with using Flexbox, setting flex-basis to auto, and having a Base size max-content for Flex projects without setting additional size limits for projects. This width is the length of the content in the project without folding lines at all. Each project then takes a portion of the space proportionally based on the base size it occupies, as detailed in the Flexbox specification.

“Note that when the Flex shrink factor allocates negative space, it adds to the base size of the Flex project. The final amount of negative space allocated is proportionally allocated to each item according to the factor value. Small programs are not going to shrink to zero until the larger programs shrink significantly.”

Larger projects have less space to extract. You can compare the two images below. In the first image, each item has about the same volume, so it looks almost the same width. In the second figure, the third project has more content and you see that it is allocated more space.

Projects with more content are allocated more space

Flexbox did its best to give us a reasonable layout without using more attributes. In contrast to a one-size-fits-all distribution of the same width for each item, which can result in very high numbers of content items being squeezed, an elastic layout allocates more display space to items with more content. This behavior is the best use case for elastic layouts. Elastic layouts are best at placing a group of items in a flexible and content-aware way — along an axis. This article has only scratched the surface, and I’ll cover these algorithms appropriately in a later article in the series.

conclusion

In this article, we walk through some of the initial values used in elastic layouts and explain what actually happens when we declare display: flex. As you go along, it turns out that there are a lot of things, and there are several properties that are involved in this paper that are involved in many of the key properties of elastic layouts.

The elastic layout is so flexible: by default, it tries to make the right choice about the content — compress or stretch the Flex project for optimal readability. Flexible layouts also support writing mode: the orientation of rows and columns is related to the writing mode used. By choosing how the space is distributed, the elastic layout allows Flex items to be aligned as a group on the main axis; You can also align items in a Flex line and move Flex items in relation to each other on the cross axis. Importantly, the flexible layout is aware of the size of the Flex project’s content and attempts to allocate space appropriately to each project without setting any additional attributes. In future articles, we will discuss these points in more depth and take a closer look at when and why you choose to use elastic layouts.

(after)