Tổng quát về canh lề với Flexbox display

Bây giờ chưa nắm vững về flexbox và cách canh lề trong flexbox thì thật là thiếu xót trong thời đại 2018, chúng ta đã qua thời xài float, clearfix

Cần nắm

Khi sử dụng display: flex các element con bên trong chúng ta sẽ canh theo 2 phương, gọi là phương ngang và phương đứng

flex-direction

flex-direction sẽ có 4 giá trị để ta set

  1. flex-direction: row: element con xếp theo từng hàng, chỉ xuống hàng khi set flex-wrap: wrap, hoặc viết tắt 2 thuộc tính này lại thành flex-flow: row wrap
  2. flex-direction: row-reserve: element con xếp thèo hàng đi từ phải qua trái
  3. flex-direction: column: element con xếp theo cột từ trên xuống dưới
  4. flex-direction: column-reserve: element con xếp theo cột từ dưới lên trên

justify-content

Với justify-content sẽ ảnh hưởng tới phương ngang của các element con, nếu .container chúng ta xếp các element theo dạng row (mặc định khi set display: flex), chúng ta can thiệp chiều xếp element con trong row này bằng justify-content

  1. flex-start : elements từ trái qua phải trong 1 row
  2. flex-end: elements từ phải qua trái trong 1 row
  3. center: dàn các element từ giữa ra 2 bên
  4. space-between: dàn các element đều hết 1 row, chỉ chừa khoảng trống giữa 2 element, không chừa khoảng trống 2 element cuối
  5. space-around: tương tự như space-around nhưng chừa luôn khoảng trống 2 element cuối

align-items và align-self

Thuộc tính align-items sẽ ảnh hưởng đến phương đứng của element con, nếu align-items dùng để set ở .container, thì align-self sẽ set ở element con để đè lại giá trị trên từng thằng con

Cả 2 thằng này đều có thể dùng các giá trị sau

  1. auto giá trị align-self kế thừa từ align-items, mặc định của align-self
  2. flex-start: canh từ trên xuống
  3. flex-end: canh từ dưới lên
  4. center: canh từ giữa ra trên dưới
  5. baseline: canh theo baseline của các element nằm ngang nhau
  6. stretch: kéo độ cao của element để phủ hết chiều đứng của .container

Tổng quát về canh lề với Flexbox display