Thuộc tính justify-items

Thuộc tính justify-items xác định căn chỉnh các phần tử bên trong các ô của lưới theo trục ngang. Cách căn chỉnh có thể thấy rõ nhất khi xem lưới trong công cụ gỡ lỗi của trình duyệt. Được áp dụng cho phần tử cha.

Cú pháp

cssbộ chọn {
  justify-items: flex-start | flex-end | center ;
}

Giá trị

Ví dụ . Căn chỉnh theo đầu trục ngang

Hãy căn chỉnh các phần tử của chúng ta bên trong các ô theo đầu trục ngang:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: grid;
  justify-items: start;
  grid-template-columns: 100px 100px;
  grid-template-rows: repeat(3, 1fr);
  gap: 10px;
  padding: 10px;
  height: 200px;
  width: 400px;
  border: 2px solid #696989;
}
#parent > div {
  gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}

Результат:

Bây giờ hãy xem lưới của chúng ta trong công cụ gỡ lỗi:

Ví dụ . Căn chỉnh theo giữa trục ngang

Hãy căn chỉnh các phần tử của chúng ta trong các ô theo giữa trục ngang:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: grid;
  justify-items: center;
  grid-template-columns: 100px 100px;
  grid-template-rows: repeat(3, 1fr);
  gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
  height: 200px;
  width: 400px;
}
#parent > div {
  gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}

Результат:

Sau khi kết nối công cụ gỡ lỗi trình duyệt, chúng ta sẽ thấy lưới của mình:

Ví dụ . Căn chỉnh theo cuối trục ngang

Hãy căn chỉnh các phần tử của chúng ta theo cuối trục ngang:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: grid;
  justify-items: end;
  grid-template-columns: 100px 100px;
  grid-template-rows: repeat(3, 1fr);
  gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
  height: 200px;
  width: 400px;
}
#parent > div {
  gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}

Результат:

Bây giờ hãy xem lưới qua công cụ gỡ lỗi:

Xem thêm