Thuộc tính align-content

Thuộc tính align-content thiết lập việc căn chỉnh các phần tử dọc theo trục chéo cho các khối flex và theo trục dọc cho grid. Được áp dụng cho phần tử cha.

Cú pháp

cssbộ chọn {
  align-content: flex-start | flex-end | center | space-between | space-around;
}

Giá trị

Ví dụ . Giá trị flex-start

Trong ví dụ này, trục mà việc căn chỉnh diễn ra có hướng từ trên xuống dưới, tức nó là trục chéo. Như có thể thấy từ kết quả, tất cả các phần tử của chúng ta đều bị ép sát vào phần trên của nó:

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

css#parent {
  display: flex;
  align-content: flex-start;
  flex-wrap: wrap;
  height: 200px;
  border: 1px solid #696989;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

Ví dụ . Giá trị flex-end

Trong ví dụ này, các khối bị ép sát vào cạnh dưới của trục chéo, vì thuộc tính align-content được đặt với giá trị flex-end:

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

css#parent {
  display: flex;
  align-content: flex-end;
  flex-wrap: wrap;
  height: 200px;
  border: 1px solid #696989;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

Ví dụ . Giá trị center

Hiện tại, các khối được căn giữa trục chéo:

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

css#parent {
  display: flex;
  align-content: center;
  flex-wrap: wrap;
  height: 200px;
  border: 1px solid #696989;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

Căn chỉnh theo điểm bắt đầu trục dọc trong grid

Hãy thiết lập căn chỉnh cho các phần tử trong grid theo điểm bắt đầu trục dọc:

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

css#parent {
  display: grid;
  align-content: start;
  grid-template-columns: 100px 100px;
  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;
}

Результат:

Căn chỉnh theo giữa trục dọc trong grid

Và bây giờ hãy thiết lập căn chỉnh các phần tử theo giữa trục dọc:

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

css#parent {
  display: grid;
  align-content: center;
  grid-template-columns: 100px 100px;
  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;
}

Результат:

Căn chỉnh theo điểm kết thúc trục dọc trong grid

Hãy thiết lập căn chỉnh các phần tử theo điểm kết thúc trục dọc:

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

css#parent {
  display: grid;
  align-content: end;
  grid-template-columns: 100px 100px;
  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;
}

Результат:

Xem thêm