by Ciro Santilli (@cirosantilli, 36)
  • css/flex.html: illustrates basic flex usage, including:
  • flex-grow: if there's space left, this determines how much extra space will be given to each.
  • flex-basis: the size the items want to be. But if there isnt' enough space, this can be cut up.
    Note that the minimal space required by children of the flex children cannot be necessarily cut up, and might lead things to overflow out of the container.
  • flex-shrink: if there's space missing, this determines how much extra space will be removed from each flex-basis
Other examples include:
That example calculates and displays the final widths via JavaScript, making it easier to understand the calculations being done.

Ancestors (8)

  1. Cascading Style Sheets
  2. Web technology
  3. Software
  4. Computer
  5. Information technology
  6. Area of technology
  7. Technology
  8. Home

View article source

Discussion (0)

+ New discussion

There are no discussions about this article yet.

Articles by others on the same topic (0)

There are currently no matching articles.
See all articles in the same topic + Create my own version