Skip to content

Instantly share code, notes, and snippets.

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

Understanding about Flexible Box Part 1 - #30DaysofCSSGirls

Flexible Box Part 1 - Chapter 1 to 6

Overview of Flex Box's Content

  • Any flow direction (L, R, D, U)
  • Display order reversed or rearranged at the style layer
  • Laid out linearly along a single (main) axis or wrapped into multiple lines along a secondary (cross) axis
  • “Flex” their sizes to the available space
  • Align their container or each other on the secondary (cross)
  • Dynamic collapse or uncollapse along the main axis while preserving the container’s cross size

Flex Layout Box's Model and Terminology

  • Flex container generate by an element with a flex or inline-flex display
  • Flex items are in-flow children of a flex container and spread out using Flex layout model
  • Flex directions are under flex-flow value and writing mode (physical directions, axes and sizes of Flex items / containter)

Example:

main axis
main direction

  • Primary axis along flex items are laid out
  • Extends in the main direction

main-start
main-end

  • Flex items are placed within container start on the main-start side and move towards main-end side

main size
main size property

  • Width or Height of a flex container or item = main size
  • min and max main size properties
    • min-width / max-width
    • min-height / max-height
    • main dimension

cross axis
cross dimension

  • Axis perpendicular to the main axis
  • Extends in the cross dimension

cross-start
cross-end

  • Flex lines are filled with items
  • Placed into the container starting on the cross-start side of the flex container and going towards cross-end side

cross size
cross size property

  • Width or Height of a flex container or item = cross size
  • min and max cross size properties
  • min-width / max-width
  • min-height / max-height
  • cross dimension

Flex Containers: 'flex' and 'inline-flex' 'display' values

  • 'flex'

    • causes an element to generate a flex container box that is block-level when placed in flow layout
  • 'inline-flex'

    • causes an element to generate a flex container box that is inline-level when placed in flow layout
  • Establishes a new flex formatting content for its contents

  • 'float' and 'clear' don't create floating or clearance of flex item

  • 'vertical-align' have no effect on flex item

  • '::first-line' and '::first-letter' pseudo-elements didn't apply to flex containers

  • don't contribute a first formatted line or first letter to their ancestors

Flex Items

  • Each in-flow child of a flex container becomes a flex item
  • Each contiguous sequence of child text runs is wrapped in an anonymous block container flex item
  • Flex item establishes an independent formatting context for its content

Absolutely-Positioned Flex Children

  • doesn't partcipate in flex layout
  • static position determined

Flex Items Margins and Paddings

  • margin of adjacent flex items don't collapse
  • auto margins expand to absorb extra space in the corresponding dimension
  • used for alignment and push adjacent flex items apart

Flex Items Z-Ordering

  • paint exactly the same as inline blocks

Collapsed Items

  • specify 'visbility:collapse' on a flex item causes it to become a collapsed flex item

Automatic Minimum Size of Flex Items

  • content-based minimum size

    • used value of a main axis automatic minimum size on a flex item that is not a scroll container
  • specified size suggestion

    • If the item’s computed main size property is definite, specified size suggestion is that size (clamped by its max main size property if it’s definite)
  • transferred size suggestion

    • If the item has an intrinsic aspect ratio and computed cross size property is definite, transferred size suggestion is that size (clamped by its min and max cross size properties if they are definite)
  • content size suggestion

    • If the item has aspect ratio is definite, content size suggestion is that size (clamped by its min size property if it’s definite)
    • converted through aspect ratio (clamped by its max main size property if it’s definite)

Ordering & Orientation

  • Contents of a flex container can be in any direction and order

Flex Flow Direction: 'flex-direction' property

  • specify how flex items are placed inside flex container by set the direction of the flex container's main axis

  • row | row-reverse | column | column-reverse

  • row

    • flex container's main axis has the same orientation as the inline axis
    • main-start and main-end direction are equal to inline-start and inline-end directions
  • row-reverse

    • same as row
    • swapped directions of the main-start and main-end
  • column

    • flex container's main axis has the same orientation as the block axis
    • main-start and main-end direction are equal to block-start and block-end directions
  • column-reverse

    • same as column
    • swapped directions of the main-start and main-end

Flex Flow Direction: 'flex-direction' property

  • controls whether flex container is single or multi-line and direction of cross-axis

  • nowrap | wrap | wrap-reverse

  • nowrap

    • flex container = single-line
  • wrap

    • flex container = multi-line
  • wrap-reverse

    • same as wrap

Flex Direction and Wrap: 'flex-flow' shorthand

  • shorthand for setting 'flex-direction' and 'flex-wrap' properties
  • define flex container's main and cross axes
  • <'flex-direction'> || <'flex-wrap'>

Display Order: 'Order' Property

  • control the order in which flex items appear within the flex container by assigning them to collection groups
  • take a single 'integer' value which specifies which collection group which flex item belongs to
Reordering and Accessibility
  • doesn't affect order in non-visual media
  • doesn't affect default traversal order of sequential navigation modes

Flex Lines

  • Flex items in a flex container are laid out and aligned within flex lines

  • Flex container can be either single-line or multi-line, depends on the flex-wrap property:

    • single-line flex container- (i.e. one with flex-wrap: nowrap) lays out all of its children in a single line
    • A multi-line flex container (i.e. one with flex-wrap: wrap or flex-wrap: wrap-reverse) breaks its flex items across multiple lines

References:

https://www.w3.org/TR/css-flexbox-1/

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