1. Flexbox là gì?

Flexbox là một cách để thiết lập bố cục cho trang web của bạn. Về cơ bản, nó phục vụ cho việc tạo nên một trang web responsive, tức là nó sẽ tự cân đối kích thước của các phần tử bên trong để phù hợp cho việc hiển thị trên mọi thiết bị.

Khi nào nên dùng flexbox?

Theo như khuyến cáo của Mozilla, flexbox chỉ nên được dùng khi bạn xử lí với layout chỉ có một chiều (hoặc là hàng hoặc là cột). Nếu bạn muốn xử lí hai chiều (cả hàng và cột), bạn có thể tìm hiểu về CSS Grid.

Thuộc tính justify-content của flexbox

Khi mà các phần tử ở trong container không chứa hết trong chiều rộng của container, thuộc tính này sẽ xác định cách sắp xếp các phần tử ở trong container đó

Làm thế nào để hiểu hết về flexbox?

Hiện nay có rất nhiều trang hướng dẫn về flexbox, từ có tiếng đến vô danh. Nhưng chắc chắn một điều rằng bạn không thể học về flexbox nếu không có các ví dụ minh họa trực quan sau đây.

2. Cách dùng một số giá trị của thuộc tính justify-content

flex-start

justify-content: flex-start luôn là giá trị mặc định, kể cả khi bạn không khai báo thuộc tính này, nó sẽ luôn căn phần tử về phía trái, khá giống với float: left

flex-end

flex-end thì giống với float-right, nó căn các phần tử về phía bên phải

center

Nói một cách dễ hiểu, giá trị này sẽ căn giữa các thành phần trong flexbox

space-between

Gía trị này giúp cho các khoảng cách giữa các thành phần luôn bằng nhau, tuy nhiên phần tử đầu luôn nằm sát trái, phần tử cuối luôn nằm sát phải

space-around

Giá trị này cũng làm cho các khoảng cách giữa các phần tử bằng nhau, tuy nhiên nó cũng thay đổi cả vị trí của hai phần tử đầu cuối

space-evenly

Về cơ bản, nó làm cho các khoảng cách ở giữa hai vùng kề cận nhau luôn như nhau

stretch

Giá trị này sẽ kéo giãn các phần tử cho lấp đầy flex, tuy nhiên nếu độ dài của các phần tử quá ngắn thì các phần tử sẽ float: left

3.Tự tay nghịch thử

Bạn có thể tự tùy chỉnh các thông số của flexbox ở trang sau: http://www.csstutorial.org/flex-generator.html

4. Kết

Hy vọng qua các ví dụ trực quan ở trên, bạn có thể hiểu thêm về cách sử dụng thuộc tính justify-content

Tài liệu tham khảo: https://medium.freecodecamp.org/css-flex-an-interactive-tutorial-19ff6e93558