Please enable JavaScript.

Coggle requires JavaScript to display documents.

CSS: Layout (Flexbox (Terminology (Main axis (Direction of flex items,…

- - - - Direction of flex items
      - Main start and main end
    - - Perpendicular to the flex direction
      - Cross start and cross end
  - - - Defaults to row
      - column, row-reverse, column-reverse
    - - wrap
      - Moves the overflow to a new line
  - - - Proportion to be allocated for each child from the remaining space
    - - Proportion to be allocated for each child when content overflows
    - - Minimum size of an item
      - Takes precedence over flex-grow
      - auto
  - - - Alignment on the cross axis
      - Defaults to stretch
      - align-self
    - - Alignment on the main axis
      - Defaults to flex-start
- - - - auto-fill for the count
      - minmax(min, max) for value
  - - - grid-auto-rows
      - grid-auto-columns
      - minmax(min, max)
  - - - grid-row
        
        -start
        
        -end
      - grid-column
        
        -end
        
        -start
      - Minus values
        
        Count inwards from the end
        
        Works only for explicit grid
    - - grid-template-areas
        
        All cells need to be defined
        
        Spanning by repeated names
        
        Period (.) for empty cells
        
        Areas are rectangular
        
        Areas can't be repeated
      - grid-area
- - - - table
      - table-row
      - table-cell
      - table-caption
  - - - Cleared so that they separate from other rows
    - - Floated
      - Width specified in absolute values
      - Margin as a gutter
      - Column spanning
        
        Additional column width inclusive of gutters
        
        Unsemantic markup
      - Column offsets
        
        margin: left
- - - - Block flow direction
        
        Based on writing mode
- - - - Default
    - - Element is positioned relative to its static position
    - - Completely removes an element from the normal flow
      - Element is positioned relative to its containing element
      - Can be used to resize elements
    - - Completely removes an element from the normal flow
      - Element is positioned relative to the browser viewport
    - - Behave as if relatively positioned until a certain threshold
      - Behaves as if a fixed positioned element after that threshold
  - - - top, bottom, left, right
    - - z-index
      - Positioned elements sit above static elements
      - Elements later in source sit above earlier elements
  - - - Sits outside the <HTML> element
      - Has the dimensions of the viewport
- - - - Clearfix hack
        
        Clearing a generated element
      - Overflow
        
        Any value other than visible
        
        Creates a block formatting context
      - Flow-root
        
        display: flow-root
        
        Creates a block formatting context
  - - - Moved out of the normal flow
      - Placed to the right or left inside its parent
    - - Wraps around the floated element
      - Extends underneath the floated element