Tìm hiểu justify-content trong CSS

 

justify-content css là gì?

Thuộc tính justify-content CSS xác định cách trình duyệt phân phối không gian giữa và xung quanh các mục nội dung dọc theo trục chính của vùng chứa linh hoạt và trục nội tuyến của vùng chứa lưới.

Ví dụ tương tác bên dưới minh họa một số giá trị bằng cách sử dụng Grid Layout.

Cú pháp justify-content trong css

/* Positional alignment */
justify-content: center;
justify-content: start;
justify-content: end;
justify-content: flex-start;
justify-content: flex-end;
justify-content: left;
justify-content: right;
/* Normal alignment */
justify-content: normal;

/* Distributed alignment */
justify-content: space-between;
justify-content: space-around;
justify-content: space-evenly;
justify-content: stretch;    
/* Overflow alignment */
justify-content: safe center;
justify-content: unsafe center;

/* Global values */
justify-content: inherit;
justify-content: initial;
justify-content: revert;
justify-content: unset;

Tìm hiểu 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

Tìm hiểu justify-content: 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

Tìm hiểu justify-content: 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

Tìm hiểu justify-content: 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.

Tìm hiểu justify-content: 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

Tìm hiểu justify-content: 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

Tìm hiểu justify-content: 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

Ví dụ justify-content: space-between

#container {
  display: flex;
  justify-content: space-between; /* Can be changed in the live sample */
}

#container > div {
  width: 100px;
  height: 100px;
  background: linear-gradient(-45deg, #788cff, #b4c8ff);
}

Ví dụ justify-content: start

#container {
  display: flex;
  justify-content: start; /* Can be changed in the live sample */
}

#container > div {
  width: 100px;
  height: 100px;
  background: linear-gradient(-45deg, #788cff, #b4c8ff);
}

Ví dụ justify-content: end

#container {
  display: flex;
  justify-content: start; /* Can be changed in the live sample */
}

#container > div {
  width: 100px;
  height: 100px;
  background: linear-gradient(-45deg, #788cff, #b4c8ff);
}

Ví dụ justify-content: center

#container {
  display: flex;
  justify-content: center; /* Can be changed in the live sample */
}

#container > div {
  width: 100px;
  height: 100px;
  background: linear-gradient(-45deg, #788cff, #b4c8ff);
}

Nguồn: Lập trình css