Thuộc tính justify-self

Thuộc tính justify-self thiết lập căn chỉnh của một phần tử riêng lẻ trong Grid dọc theo trục ngang. Thuộc tính được áp dụng cho phần tử mà chúng ta muốn căn chỉnh.

Cú pháp

cssphần-tử {
  justify-self: start | center | end;
}

Giá trị

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

Hãy thiết lập căn chỉnh cho phần tử đầu tiên của chúng ta theo đầu trục ngang:

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

css#parent {
  display: grid;
  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;
}
#elem1 {
  justify-self: start;
}

Результат:

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

Hãy thiết lập căn chỉnh cho phần tử đầu tiên theo giữa trục ngang:

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

css#parent {
  display: grid;
  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;
}
#elem1 {
  justify-self: center;
}

Результат:

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

Hãy thiết lập căn chỉnh cho phần tử đầu tiên theo cuối trục ngang:

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

css#parent {
  display: grid;
  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;
}
#elem1 {
  justify-self: end;
}

Результат:

Xem thêm