CSS Flexbox cơ bản (Phần 4: Justify-content)

Chào các bạn, mình đã trở lại sau thời gian dài vắng bóng, vì mình đang vào thời kì căng thẳng của mùa thi nên không thể viết bài thường xuyên được, nhưng mình sẽ viết bài mới khi mình có thể.

Tiếp tục chuỗi demo về css flexbox, hôm nay mình sẽ nói về justify-content.

Justify-content cho phép chúng ta căn chỉnh các phần tử theo chiều ngang hoặc chiều dọc tùy thuộc vào flex-direction mà không làm thay đổi trật tự của các phần tử.

Justify-content được đặt ở thẻ bao ngoài các phần tử mà bạn muốn căn chỉnh.

Như những lần trc mình sẽ tạo thẻ cha và các thẻ phần tử bên trong thẻ cha trong file html.

Viết css

.box{
            display: flex;
}
        .item{
            width: 100px;
            height: 100px;
}
.item:nth-of-type(1){
            background: red;
}
.item:nth-of-type(2){
            background: yellow;
}
.item:nth-of-type(3){
            background: green;
}

Justify-content có 5 giá trị (theo chiều ngang) mình sẽ vừa nêu vừa demo cho các bạn dễ hiểu nhé:

– Flex-start ( giá trị mặc định ): Các phần tử sẽ nằm sát lề trái của thẻ cha.

Demo: thêm css justify-content: flex-start; vào thẻ cha.

– Flex-end: Ngược lại với flex-start, khi dùng flex-end các phần tử sẽ nằm sát lễ trái của thẻ cha.

Demo: thêm css justify-content: flex-end; vào thẻ cha.

– Center: Các phần tử bên trong sẽ được căn giữa

Demo: thêm css justify-content: center; vào thẻ cha.

– Space-around: Các phần tử bên trong có khoảng cách 2 bên giữa các phần tử

Demo: thêm css justify-content: space-around ; vào thẻ cha.

Nếu không hiểu rõ về justify-content: space-around ; bạn có thể nhìn vào hình minh họa của mình bên dưới, đường viền màu đen thể hiện khoảng cách 2 bên của 1 phần tử nhìn vào và suy ngẫm bạn chắc chắn se hiểu.

– Space-between: Tạo khoảng cách bằng nhau giữa các phần tử .

Demo: thêm css justify-content: space-between; vào thẻ cha.

Thế là mình đã nói xong 5 giá trị trong justify-content rồi, giờ mình bận rồi phải tạm biệt các bạn sớm thôi. Hẹn gặp các bạn ở các bài viết tiếp theo của mình nhé, cám ơn các bạn đã đọc đến cuối bài viết của mình.

Như Trần
PLT SOLUTIONS

Trả lời Hủy