Lingquan | Blog

Layout by Flexbox and CSS Grid

Word count: 349Reading time: 2 min
2019/01/18 Share

Layout by Flexbox and CSS Grid

Flexbox

1. For Container:

  • float, clear, vertical-align for the items inside flexbox will become invalid
  • display: inline-flex vs display: flex:—-only apply to flex container, to make it display as inline or block won’t affect flex items
    inside
  • prosperities:

    1. flex-direction: row | row-reverse | column | column-reverse
    2. flex-wrap: break new line or not when exceeding it container nowrap | wrap | wrap-reverse;
    3. flex-flow: combination of the first two flex-direction || flex-wrap;
    4. align-items: where flex items sit on the cross axis
      flex-start | flex-end | center | baseline | stretch;
    5. justify-content: where the flex items sit on the main axis flex-start | flex-end | center | space-between | space-around

2. For flex items:

  • flex: 1 1 20px: three attributes: flex-grow flex-shrink flex-basis
  • order: 3: like the smaller will be put in front
  • align-self: override its container’s align-items layout, update position of itself

Good website to pratice it

CSS Grid

1. Common properties for container:

Use “display: grid;” in container

  • grid-gap: 20px;
  • grid-template-columns: 300px 300px 300px;
  • grid-template-columns: 300px 300px 300px;
  • grid-template-columns: 300px 300px 1fr;
  • grid-template-columns: 300px 1fr 1fr;
  • grid-template-columns: 1fr 1fr 1fr;
  • grid-template-columns: repeat(3, 1fr); /how many times to repeat what/
  • grid-template-columns: auto 1fr 1fr; /auto = max size of content/
  • grid-template-rows: 1fr 1fr 1fr;
  • grid-template-columns: repeat(auto-fill, 200px);
  • grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  • justify-items: end;
  • align-items: end;

    2. Common properties for chidren

  • grid-column: span 2; /high number will cause it to create extra grids even if we didn’t tell it/
  • grid-row: span 2;
  • grid-column-start: 2;
  • grid-column-end: 4;
  • grid-column: 2 / 4;
  • grid-column: 2 / -1; / span it to the last track /
  • grid-row: 2 / -1; /but you need to define rows in the container/
  • justify-self: end;
  • align-self: end;

Good link to learn more

CATALOG
  1. 1. Layout by Flexbox and CSS Grid
    1. 1.1. Flexbox
      1. 1.1.1. 1. For Container:
      2. 1.1.2. 2. For flex items:
    2. 1.2. CSS Grid
      1. 1.2.1. 1. Common properties for container:
      2. 1.2.2. 2. Common properties for chidren