Flex Basics 1: direction, wrap, justify-content, align content, grow and shrink

This chapter shows how flex behaves if the flex items are constrained by width and height. This behaviour is excercised by some usages in the following sub chapter Usage.

Flex properties that target the flex container

(+HW1) shows on a 3 boxes wide flex container how 3 flex items are laid out. As you can see, the flex items fit exactly inside the flex container.

(+HW2) shows that - on scarce space - the flex container will shrink it's flex items. This behaviour is the specified default for a flex container. All these defaults as well as the responsible property flex-shrink are described later in this chapter.

(+HW3) shows that the direction of the flex-item layout on the flex container can turn the flex items to be displayed vertically.

(+HW4) enables the flex-wrap property. On scarce space - as opposed to (+HW2) - the flex items are not shrinked, but wrapped onto a new line and can preserve their given size.

(+HW5) let's us meet our first flex shorthand property. flex-flow defines both flex properties of flex-direction and flex-wrap in that single flex proeprty; in that respective order.

display: flex; 
flex-flow: row wrap;

(+HW6) introduces how you can justify flex items, here beginning the justification at the end of the item container.

(+HW7) introduces how you can justify flex items, here beginning the justification at the end of the item container.

Flex properties that target a flex item

(+HW8) shows our first flex property flex-grow which targets a flex-item. By toggeling the growing behaviour of a flex-item to On, the flex container assigns it all the available space. Let me repeat that: the value of 1 toggled the growing behaviour of this flex-item to On. This implies three further facts

  • The growing behaviour can be toggled Off by setting it to a value of 0.
  • The default growing behaviour of flex items is Off.
  • The growing behaviour can be set to any other positive integer; in that case another behaviour of flex containers apply - that of ratios. A ratio defines to what extent a flex item grows relative to the total value of the other flex items in that flex container.

(+HW9) shows our next flex property flex-shrink which targets a flex-item. This flex property stages the opposite behavior of growing, that is shrinking. The value of 0 toggles the shrinking behaviour of this flex-item to Off. Hence the flex item, with it's width and height set, overflows it's flex container. This implies three further facts

  • The shrinking behaviour can be toggled On by setting it to at least a value of 1.
  • The default shrinking behaviour of flex items is On.
  • The shrinking behaviour can be set to any other positive integer; in that case another behaviour of flex containers apply - that of ratios. A ratio defines to what extent a flex item shrinks relative to the total value of the other flex items in that flex container.

(+HW10) shows that the flex container will shrink it's flex item to it's constraining dimension if the shrinking behaviour is toggled On.

Usage

The + in the usages stand's to remind you that the wdith and height constraint of the flex items apply to all usages of this chapter.

Additionally the dimension of the container is given as HW - standing for [H]eight[W]idth - in units of flex items. Both settings are annotated first just below the example's main section header. If any example does override these settings, it says so right below it's own header in the examples.

See the Pen Flexbox Basics 1 by 4joma7 (@4joma7) on CodePen.

Take Home Messages

How To Set The Lining Up Of Flex Items Relative To The Container?

For the lining up of flex items along the main axis use justify-content.

For the lining up of flex-items along the cross axis use align-content.

Both are flex properties that target the flex container.

See the align-self property which overrides the container's align-content value for a flex item.

What Is The Flex Standard's Default For flex-grow?

It is 0, which means Off. Hence none of the flex items will grow, even if there is more space than necessary.

What Is The Flex Standard's Default For flex-shrink?

It is 1, which means On. Hence any of the flex items will shrink, as soon as there is less space than necessary.

results matching ""

    No results matching ""