Flexbox by trial. Part 2.

Alignment

Alignment is set on the flex container, not content/items in the container. Main axis (row/column) manages which way alignment is applied, eg on row centre will center horizontally, column will centre items vertically

More information on justify-content

    .class {
      webkit-justify-content: center;
    justify-content: center;
    }
  

Application of justify centre to row

Application of justify centre to column

Cross-axis alignment

Cross-axis alignment is set to align element in opposite axis (vertically for row/horizontally for column), stretch is default (fills in flex container)

More information on align-items

    .class {
      webkit-align-items: center;
      align-items: centre;
    }
  

Cross-axis alignment to centre

Cross-axis alignment to flex-end

Cross-axis alignment for a single item

Defines alignment for specific element, should be applied to a specific item.

    .self {
      align-self: flex-start;
      -webkit-align-self: flex-start;
    }
  

Flex items and margins

Margins don't collapse, margin auto can be used to distribute empty space

    .push-right {
      margin-left: auto;
    }
  

Cross-axis alignment to centre

Cross-axis alignment for wrapped item

align-content aligns content along cross-axis (justify-content aligns content along main axis), can create evenly spaced items both horizontally and vertically

    .class {
      -webkit-align-content: space-around;
      align-content: space-around;
    }
  

Cross-axis alignment of content