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

• Cần nắm
• flex-direction
• justify-content
• align-items và align-self

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