Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Understanding about Flexible Box Part 2 - #30DaysofCSSGirls

Understanding about Flexible Box Part 2 - #30DaysofCSSGirls

Flexible Box Part 2 - Chapter 7 to 8

Flexibility

  • Ability to make flex items to be "flex"
  • Alter width / height to fill available space inside container

'flex' Shorthand

  • none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ]

  • <‘flex-grow’>

    • set 'flex-grow' longhand
    • specifies the flex grow factor
  • <‘flex-shrink’>?

    • set 'flex-shrink' longhand
    • specifies the flex shrink factor
  • <‘flex-basis’>?

    • set 'flex-basis' longhand

    • specifies the flex basis

      • auto

        • retrieve the value of main size property as used flex-basis
      • content

        • indicate an automatic size based on the flex item's content
      • width

        • flex-basis resolved same way as auto and content
  • none

    • expands to 0 0 auto
Basic Values of 'flex'
  • flex: initial

    • equal to flex: 0 1 auto
    • makes flex item inflexible when got free space
    • shrink to its minimum size when lack of space
  • flex: auto

    • equal to flex: 1 1 auto
    • makes flex item flexible when got free space
    • sized to its distributed size
  • flex: none

    • equal to flex: 0 0 auto
    • makes flex item inflexible when got free space
    • unable to shrink into its minimum size when lack of space or overflow situations
  • flex: positive

    • equal to flex: <positive-number> 1 0 auto
    • makes flex item flexible
    • set flex basis to zero
    • sized to its proportion size for flex item

Components of Flexibility

'flex-grow' Property
  • <number>
    • Sets the flex grow factor to <number>
    • Negative numbers are invalid
'flex-shrink' Property
  • <number>
    • Sets the flex shrink factor to <number>
    • Negative numbers are invalid
'flex-basis' Property
  • content|<width>
    • Sets the flex basis
    • Accept same values as width, height and content

Alignment

  • margin properties can used to align items
  • alignment properties from CSS Box Alignment

Aligning with 'auto' margins

  • Auto margins on flex items have an similar to Auto Margins in block flow:

    • During calculations of flex bases and flexible lengths, auto margins are treated as 0
    • Alignment via justify-content and align-self, any positive free space is distributed to auto margins in that dimension
    • Overflowing boxes ignore their auto margins and overflow in the end direction

Axis Alignment: 'justify-content' property

  • flex-start | flex-end | center | space-between | space-around

  • Align flex items along the main axis of the current line of the flex container (x-axis)

  • flex-start

    • packed towards start of the line
    • main-start margin edge of the first flex item on the line is placed flush with the main-start edge of the line
    • each subsequent flex item is placed flush with the preceding item
  • flex-end

    • packed towards end of the line
    • main-end margin edge of the last flex item on the line is placed flush with the main-end edge of the line
    • each preceding flex item is placed flush with the subsequent item
  • center

    • packed towards center of the line
    • flex items on the line are placed flush with each other
    • aligned center of the line (equal amounts of space between main-start and main-end)
  • space-between

    • evenly distributed of the line
    • main-start margin edge of the first flex item on the line is placed flush with the main-end edge of the line
    • main-end margin edge of the last flex item on the line is placed flush with the main-end edge of the line
    • remaining flex items on the line are distributed so that the spacing between any two adjacent items is the same
  • space-around

    • evenly distributed of the line with half-size spaces on either end
    • flex items on the line are placed flush with each other
    • aligned center of the line (space between main-start and main-end is half size of spacing between flex items)

Example:

Cross-axis Alignment: 'align-items' and 'align-self' properties

'align-items'
  • flex-start | flex-end | center | baseline | stretch
  • Sets the default alignment for all of the flex container's items
'align-self'
  • auto | flex-start | flex-end | center | baseline | stretch

  • Default alignment to be overridden for individual flex items

  • auto

    • defers cross-axis alignment control to the value of align-items on the parent box
  • flex-start

    • defers cross-start margin edge of flex item is placed flush with cross-start edge of the line
  • flex-end

    • defers cross-end margin edge of flex item is placed flush with cross-end edge of the line
  • center

    • flex item's margin box centered in the cross axis within the line
  • stretch

    • flex item stretched
      • used value is the length necessary to make cross size of the item's margin box
  • baseline

    • flex item participates in baseline alignment
      • all participating flex items on the line are aligned such that their baselines align

Example:

Packing Flex Lines: 'align-content' property

'align-content'
  • flex-start | flex-end | center | space-between | space-around | stretch

  • Align a flex container’s lines within the flex container when there is extra space in the cross-axis (y-axis)

  • flex-start

    • packed towards start of the flex container
    • cross-start edge of the flex container on the line is placed flush with the cross-start edge of the flex container
    • each subsequent flex item is placed flush with the preceding item
  • flex-end

    • packed towards end of the flex container
    • cross-end edge of the flex container on the line is placed flush with the cross-end edge of the flex container
    • each preceding flex item is placed flush with the subsequent item
  • center

    • packed towards center of the flex container
    • flex container on the line are placed flush with each other
    • aligned center of the line (equal amounts of space between cross-start and cross-end)
  • space-between

    • evenly distributed of the flex container
    • cross-start margin edge of the first flex item on the line is placed flush with the cross-end edge of the flex container
    • cross-end margin edge of the last flex item on the line is placed flush with the cross-end edge of the flex container
    • remaining flex items on the flex container are distributed so that the spacing between any two adjacent items is the same
  • space-around

    • evenly distributed of the line with half-size spaces on either end
    • flex container on the line are placed flush with each other
    • aligned center of the line (space between cross-start and cross-end is half size of spacing between flex items)
  • stretch

    • flex item stretched to take up remaining space
      • free-space is spilt equal between all of the lines for increasing cross size

Example:

Flex Container Baselines

  • first / last main-axis baseline set

When the inline axis of the flex container matches its main axis, its baselines are determined as follows:

  1. If any of the flex items on the flex container’s startmost/endmost flex line participate in baseline alignment, the flex container’s first/last main-axis baseline set is generated from the shared alignment baseline of those flex items.

  2. Otherwise, if the flex container has at least one flex item, the flex container’s first/last main-axis baseline set is generated from the alignment baseline of the startmost/endmost flex item.

  3. Otherwise, the flex container has no first/last main-axis baseline set, and one is synthesized if needed according to the rules of its alignment context.

  • first / last cross-axis baseline set

When the inline axis of the flex container matches its cross axis, its baselines are determined as follows:

  1. If the flex container has at least one flex item, the flex container’s first/last cross-axis baseline set is generated from the alignment baseline of the startmost/endmost flex item.

  2. Otherwise, the flex container has no first/last cross-axis baseline set, and one is synthesized if needed according to the rules of its alignment context.

References:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment