Align-content aýratynlygy

align-content aýratynlygy elementleri flex bloklar üçin enine oke boýunça we gridler üçin dik oke boýunça deňleşdirýär. Ene elementine degişlidir.

Sintaksis

cssselektor {
  align-content: flex-start | flex-end | center | space-between | space-around;
}

Görnüşleri

Mysal . flex-start görnüşi

Bu mysalda deňleşdirilýän ok ýokardan aşak tarap ugrulýar, ýagny enine ok bolýar. Görşüňiz ýaly, ähli elementlerimiz onyň ýokarky bölegine basylyp goýulýar:

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;
}

Результат:

Mysal . flex-end görnüşi

Bu mysalda bloklar enine oküň aşaky tarapyna basylyp goýulýar, sebäbi align-content aýratynlygy flex-end görnüşinde bellendi:

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;
}

Результат:

Mysal . center görnüşi

Häzir bloklar enine oküň merkezi boýunça deňleşdirilýär:

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;
}

Результат:

Gridde dik oküň başy boýunça deňleşdirme

Geliň gridimizdäki elementlerimizi dik oküň başy boýunça deňleşdireliň:

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;
}

Результат:

Gridde dik oküň merkezi boýunça deňleşdirme

Indi bolsa elementleri dik oküň merkezi boýunça deňleşdireliň:

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;
}

Результат:

Gridde dik oküň ahyry boýunça deňleşdirme

Geliň elementleri dik oküň ahyry boýunça deňleşdireliň:

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;
}

Результат:

Şeýle-de serediň