Css hai đối tượng cùng chiều cao với nhau
|
1 2 3 4 5 6 7 |
display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-wrap: wrap; align-items: stretch //Chiều cao của 2 div sẽ ngang nhau |
Ví dụ:
Css hai đối tượng canh giữa
|
1 2 3 4 5 6 7 |
display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-wrap: wrap; align-items: center; |
Ví dụ:
Css hai đối tượng canh TOP và BOTTOM
Css đối tượng tự canh giữa so với các đối tượng còn lại
|
1 2 3 4 5 6 7 8 9 10 |
display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around; align-items: stretch; align-content: stretch; |
|
1 2 3 4 5 6 7 |
display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content:center; |
Note: Div bọc ngoài phải đặt Height để IE hổ trợ
Ví dụ:
Canh khoảng cách giữa và xung quanh trong một div (space-between)
|
1 2 3 4 5 6 |
display: flex; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; justify-content: space-between; |
Note: Khi dùng flex thì div trong không được dùng float
