🎨

CSS: Flexbox & Grid

58 cards · 🇺🇸 English

Layout with CSS Flexbox and Grid.

Study all 58 cards for free

Flashcards, quizzes, pixel-art games and a daily review that remembers for you.

Study this deck free

Try the first 10 cards

1 / 10
Question

Flexbox

Knew itLearning

Tap the card for the answer · swipe right if you knew it, left if not

Already have an account? Sign in

Cards

  1. 1Flexbox
    A CSS layout module for creating one-dimensional layouts (row or column). It allows flexible sizing and alignment of items along a main axis.
  2. 2Create a flex container
    Apply display: flex or display: inline-flex to an element. Its direct children automatically become flex items.
  3. 3Main axis in Flexbox
    The primary axis along which flex items are laid out. Direction is set by flex-direction (row = horizontal, column = vertical).
  4. 4Cross axis in Flexbox
    The axis perpendicular to the main axis. If main axis is horizontal (row), cross axis is vertical, and vice versa.
  5. 5Values for flex-direction
    row (default, left to right), row-reverse, column (top to bottom), column-reverse. Sets the main axis direction.
  6. 6Justify-content
    Aligns flex items along the main axis. Values: flex-start, flex-end, center, space-between, space-around, space-evenly.
  7. 7Align-items
    Aligns flex items along the cross axis. Values: stretch (default), flex-start, flex-end, center, baseline.
  8. 8Align-self
    Overrides align-items for individual flex items. Allows one item to have different cross-axis alignment than its siblings.
  9. 9Flex-wrap
    Controls whether flex items wrap onto multiple lines. Values: nowrap (default, single line), wrap, wrap-reverse.
  10. 10Align-content
    Aligns multiple lines of flex items along the cross axis when there's extra space. Only works with flex-wrap: wrap.
  11. 11Flex property shorthand
    flex: [flex-grow] [flex-shrink] [flex-basis]. Example: flex: 1 0 auto means grow, don't shrink, auto basis.
  12. 12Flex-grow
    Defines the ability for a flex item to grow if necessary. Default 0. Value is a proportion (flex-grow: 2 grows twice as much as 1).
  13. 13Flex-shrink
    Defines the ability for a flex item to shrink if necessary. Default 1. Value 0 prevents shrinking.
  14. 14Flex-basis
    Defines the default size of an element before remaining space is distributed. Default auto. Can be length (px, %, em) or keyword.
  15. 15Flex: 1
    Shorthand for flex: 1 1 0, meaning the item can grow and shrink, with a basis of 0. Items will share space equally.
  16. 16Center an item with Flexbox
    On the container: display: flex; justify-content: center; align-items: center. Centers along both axes.
  17. 17CSS Grid
    A two-dimensional layout system for creating complex layouts with rows and columns. More powerful than Flexbox for page-level layouts.
  18. 18Create a grid container
    Apply display: grid or display: inline-grid. Direct children become grid items.
  19. 19Grid-template-columns
    Defines the columns of the grid. Example: grid-template-columns: 200px 1fr 2fr creates 3 columns with specified widths.
  20. 20Grid-template-rows
    Defines the rows of the grid. Example: grid-template-rows: 100px auto 50px creates 3 rows with specified heights.
  21. 21Fr unit in CSS Grid
    Fractional unit representing a fraction of available space. 1fr 2fr means second column gets twice the space of the first.
  22. 22Repeat()
    Repeats a pattern. repeat(3, 1fr) creates 3 equal columns. repeat(auto-fit, minmax(200px, 1fr)) creates responsive columns.
  23. 23Grid-gap (gap)
    Creates spacing between grid items. gap: 20px (all), or row-gap and column-gap separately. Modern syntax is just gap.
  24. 24Grid-column
    Shorthand for grid-column-start / grid-column-end. Positions item across columns. grid-column: 1 / 3 spans columns 1-2.
  25. 25Grid-row
    Shorthand for grid-row-start / grid-row-end. Positions item across rows. grid-row: 2 / 4 spans rows 2-3.
  26. 26Span multiple columns/rows
    grid-column: span 2 spans 2 columns, grid-row: span 3 spans 3 rows. Or use line numbers: grid-column: 1 / 4.
  27. 27Grid-area
    Shorthand for grid-row-start / grid-column-start / grid-row-end / grid-column-end, or a named area.
  28. 28Grid-template-areas
    Defines named grid areas using a visual ASCII-art syntax. Items are placed using grid-area: <name>.
  29. 29Give an example of grid-template-areas syntax.
    grid-template-areas: 'header header' 'sidebar main' 'footer footer'; Creates 3 rows, 2 columns with named regions.
  30. 30Grid-auto-flow
    Controls how auto-placed items are inserted. Values: row (default), column, dense (fills holes).

And 28 more cards. Study the whole deck free

Articles about this deck

More Programming decks

See all
Study all 58 cards free