CSS FLEXBOX CƠ BẢN (PHẦN 4: JUSTIFY

  -  
1. Flexbox là gì?

Flexbox là một cách để thiết lập bố cục tổng quan cho website của bạn. Về cơ bản, nó ship hàng cho việc tạo nên một trang web responsive, tức là nó vẫn tự bằng phẳng kích thước của các phần tử bên phía trong để cân xứng cho vấn đề hiển thị trên các thiết bị.

Bạn đang xem: Css flexbox cơ bản (phần 4: justify

Khi nào phải dùng flexbox?

Theo như khuyến cáo của Mozilla, flexbox nên làm được dùng khi chúng ta xử lí cùng với layout chỉ có một chiều (hoặc là hàng hoặc là cột).

Xem thêm: Đăng Ký Tên Miền Com Miễn Phí Cực Nhanh Với Những Website Này

Nếu bạn muốn xử lí hai phía (cả hàng cùng cột), chúng ta cũng có thể tìm gọi về CSS Grid.

Xem thêm: Ram Là Gì Rom Là Gì - Sự Khác Nhau Giữa Rom Và Ram

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

Khi mà các thành phần ở trong container không cất hết vào chiều rộng của container, trực thuộc tính này sẽ khẳng định cách thu xếp các bộ phận ở vào container đó

Làm cầm nào nhằm hiểu hết về flexbox?

Hiện nay có không ít trang trả lời về flexbox, từ bao gồm tiếng mang đến vô danh. Nhưng chắc hẳn rằng một điều rằng chúng ta không thể học về flexbox nếu không có các ví dụ minh họa trực quan lại sau đây.

2. Bí quyết dùng một trong những giá trị của nằm trong tính justify-content

flex-start

justify-content: flex-start luôn luôn là cực hiếm mặc định, kể cả khi bạn không khai báo ở trong tính này, nó sẽ luôn luôn căn bộ phận về phía trái, khá như thể với float: left

*

flex-end

flex-end thì như là với float-right, nó căn các thành phần về phía bên phải

*

center

Nói một bí quyết dễ hiểu, cực hiếm này đang căn giữa các thành phần nằm trong flexbox

*

space-between

Gía trị này hỗ trợ cho các khoảng cách giữa những thành phần luôn bằng nhau, mặc dù nhiên phần tử đầu luôn luôn nằm giáp trái, thành phần cuối luôn nằm giáp 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 chuyển đổi cả địa điểm của hai thành phần đầu cuối

*

space-evenly

Về cơ bản, nó tạo 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 đang kéo giãn các bộ phận cho lấp đầy flex, tuy nhiên nếu độ lâu năm của các thành phần quá ngắn thì các phần tử sẽ float: left

*

3.Tự tay nghịch thử

Bạn rất có thể tự tùy chỉnh thiết lập các thông số của flexbox ngơi nghỉ trang sau: http://www.csstutorial.org/flex-generator.html

4. Kết

Hy vọng qua những ví dụ trực quan ở trên, bạn cũng có thể hiểu thêm về kiểu 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