Mục đích là chia đều độ rộng giữa các cột trong web. Có 2 điều kiện:
1. Xài thuộc tính justify-content, gán giá trị là space-between (nghĩa là không gian giữa các cột).
2. Tổng độ rộng của tất cả cột phải nhỏ hơn 100%, vì nó sẽ lấy phần dư để chia đều ra.
Ví dụ:
[css] .class{display:flex;
justify-content: space-between;
}
.class .cot1{
width:30%;
}
.class .cot2{
width:30%;
}
.class .cot3{
width:30%;
}
[/css]
Ở trong ví dụ này bạn thấy là:
– Ở lớp tính cha (class) mình đã xài thuộc tình là justify-content, gán giá trị là space-between.
– Có 3 lớp con (.cot1 .cot2 .cot3) mỗi lớp chỉ rộng 30%, vậy tổng là 90%.
– 10% còn lại nó sẽ chia đều ra, đặt vào khoảng cách giữa 3 cột.