Chia khoảng cách giữa các cột bằng thuộc tính justify-content trong css

by

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ụ:

.class{
    display:flex;
    justify-content: space-between;
}

.class .cot1{
    width:30%;
}

.class .cot2{
    width:30%;
}

.class .cot3{
    width:30%;
}

Ở 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.

Trần Thành
Latest posts by Trần Thành (see all)

Leave a Comment