Properties for the Flexbox container – Wingdings Translator Online

Flexbox CSS: properties assignable to containers with display flex, with explanations and usage examples.

We are going to continue addressing a new basic topic such as the properties available in “flex” containers. We will see how we can get a container to behave with the Flexbox rules and how to configure it to customize its behavior.

Although we already saw it in the previous article, with , we remember that the flex container, or main container, is the one in which we are going to place the flex items. If you have any doubts about this, we recommend you study the aforementioned article, because there you will find this and other concepts that we are going to rely on explained in detail.

display flex

The parent container in a Flexbox schematic is what we assign “display: flex”. This property causes the rules by which its children are to be rendered on the page to change.

.container-flex { display: flex; }

As simple as that! From now on, all elements on the page with class “flex-container” will behave according to Flexbox rules. This implies that their children are going to position themselves in a different way than usual. Therefore, it must be clear that the container itself is not going to be affected, only its children.

inline-flex display

In addition to the display flex we also have the value “inline-flex”. If we know the “inline-block” elements, the fundamental difference is the same as that compared to normal “block” elements, which behave like a block, but do not expand to occupy all the space on the horizontal.

.container-flex { display: inline-flex; }

In short, with inline-flex it is as if we had an inline-block element, where its children behave according to the Flexbox rules.

Once the container is “flex” or “inline-flex” I can apply a whole series of additional properties to it to further customize its behavior. We will see them below.

flex-direction property

This property helps us to define the direction of the element placement flow. It has to do with the axes that we met in the previous article, being able to mark if the elements are going to be placed all in the same row, or if they are going to be placed in a column, but also it also allows indicating the order of the items, normal or reverse.

Lets use these values:

row (default): Indicates that elements are placed in a row, side by side, from left to right.
row-reverse: they are placed in a row, but in order from right to left.
column: they are placed one below the other, in order the first ones on top.
column-reverse: they are placed in a column, but the first ones will appear below.

We can experiment with this property with HTML like this. (In fact, you will see that the HTML is very similar to the one in the previous exercise, and this is enough for us to test the different facets of Flexbox).

flex-wrap property

It is used to indicate if we want there to be line breaks in the elements that are placed in the container, if they do not fit in the available space.

By default with Flexbox the elements are placed on the horizontal axis, in a row. If the elements have such dimensions that they do not fit in the container, the flex behavior will make them try to group them in the row so that they fit without line breaking, but we can also configure it to make them, if they do not fit, they are passed to the next line.

nowrap (default): Makes line breaks never occur.
wrap: makes if they don’t fit, then they are placed on the next line.
wrap-reverse: The line break will occur in the opposite direction, that is, upwards.

Note: If we have “nowrap” configured, the browser will do what it can to make the elements fit in the row (if flex-direction is row or row-reverse), even altering the dimensions defined in the width of the items if necessary. However, if, no matter how much the browser tries, the elements still do not fit there, it will depend on other CSS styles what can happen. With other CSS properties we can make the elements overflow the container, those that do not fit cannot be seen, etc. For example you will use the “overflow” property of a lifetime.

.flex-container { display: flex; flex-direction: row; flex-wrap: nowrap; } .item { background-color: #369; width: 30%; padding: 5px; }

In this case we have placed “flex-wrap: nowrap” and we have also indicated that each of the items must have a width of 30%. Remember that in our HTML we had 4 items inside the flex-container and yet when we see the result we will get something like this:

It’s obvious that 4 containers at 30% each wouldn’t fit horizontally, but with flexbox the browser makes an effort to fit in one row.

Now, if we change to “flex-wrap: wrap” then the line break will occur:

flex-flow property

This property does not add anything new, as it is simply a shortcut to write flex-direction and flex-wrap in one go. Default is “row nowrap”

.flex-container { display: flex; flex-flow: row wrap; }

justify-content Property

This property is very useful to indicate how the justifications and margins of the items are going to be placed. You can indicate that they are justified at the beginning of the axis or at the end of the axis or that when distributing a space between them or a space between them and the edges.

It is interesting to treat it independently and thus be able to see several examples of it. Let’s just look at its possible values:

flex-start: Add the elements from the start of the main axis.
flex-end: Adds the elements from the end of the main axis.
center: Elements are centered in the container space, always with respect to the main axis.
space-between: causes the elements to be distributed with a proportional space between them, with the end items being placed on the edge of the container.
space-around: it is similar to space-between in the sense of leaving a proportional spacing, however, this time space is also left between the edge of the container and the end items.

We will see everything more clearly by looking at the following image:

In future articles we will address .

align-items Property

This property is very similar to the previous property, justify-content, only now we are aligning to the secondary axis and not the primary one.

In the case of a flex container whose main axis is horizontal, then align-items will serve to get the alignment on the other axis (vertical, top to bottom). In short, align-items offers us the much-desired vertical alignment that we have historically lacked in CSS.

It also deserves to make specific examples to see it in more detail, so now we’ll just list its possible values with a brief description.

flex-start: indicates that they will be positioned at the beginning of the secondary axis.
flex-end: will be positioned at the end of the secondary axis.
center: they will be positioned in the center of the secondary axis.
stretch: they will occupy the total size of the secondary axis (unless we have marked that these elements have a different size).
baseline: for the positioning of the elements, the text that is written inside will be taken into account.

align-content property

This property only applies when you have multiple lines of items in the flexbox container. The effect that we will achieve will be an alignment and separation of the rows in the secondary axis.

Note: To get multiple lines of elements in the flex container you will need to flex-flow: wrap them and of course there are enough elements, with enough width, that multiple rows are needed for their layout.

In the end, the effect we get with align-content is similar to the one we get with align-items, in the sense that it will apply its distribution effect to the secondary axis, only here we are not indicating the placement of a single row, but of all the rows. In addition, it is also similar to justify-content in the sense that we are defining the separation between items, but affecting rows of items instead of individual items.

flex-start: indicates that the rows will be placed all glued to each other (obviously they will not appear exactly glued if we have placed a margin), from the start of the secondary axis.
flex-end: The rows will be placed next to each other, but this time next to the end of the secondary axis.
center: they will be positioned in the center of the secondary axis, glued to each other.
stretch: Its dimensions will grow to occupy all the available space (unless a different dimension has been placed on the elements).
space-between: Indicates that the rows will be separated from each other, leaving a proportional space between them.
space-around: indicates that the rows will be separated, leaving a space between them proportional, also with the border.

I think it will be better understood by looking at the following image.

conclusion

With this we have already seen a good amount of the theory that you have to learn when you go to work with Flexbox, and the possibilities of this standard. Without a doubt, you will have appreciated that it allows a lot of play and very interesting variants, which will be very practical in many day-to-day situations.

In the next article we will look at properties that affect the items, instead of the container, to which we have dedicated this entire article. In addition, from now on you will also be able to find various articles where we can practice with more practical layout cases in real life.

…