Savybė align-items

Savybė align-items nurodo elementų lygiavimą išilgai skersinės ašies flex blokams ir išilgai vertikalios ašies gardams. Taikoma tėviniam elementui.

Sintaksė

cssselektorius {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

Reikšmės

Numatytoji reikšmė: stretch.

Pavyzdys . Reikšmė stretch

Dabar pagrindinė ašis nukreipta iš kairės į dešinę, o išilgai skersinės ašies elementai ištemiami per visą aukštį:

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

css#parent {
  display: flex;
  align-items: stretch;
  flex-direction: row;
  border: 1px solid #696989;
}
#parent > div {
  border: 1px solid #696989;
}

Результат:

Pavyzdys . Reikšmė stretch + elemento matmenys

Dabar elementams nustatytas plotis ir aukštis, todėl reikšmė stretch savybei align-items bus ignoruojama:

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

css#parent {
  display: flex;
  align-items: stretch;
  flex-direction: row;
  border: 1px solid #696989;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

Pavyzdys . Reikšmė flex-start be elemento matmenų

Dabar elementai bus prispausiami prie viršaus:

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

css#parent {
  display: flex;
  align-items: flex-start;
  flex-direction: row;
  border: 1px solid #696989;
}
#parent > div {
  border: 1px solid #696989;
}

Результат:

Pavyzdys . Reikšmė flex-start + elemento matmenys

Dabar elementai vis tiek bus prispausiami prie viršaus, tačiau jie turės nustatytą plotį ir aukštį:

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

css#parent {
  display: flex;
  align-items: flex-start;
  flex-direction: row;
  border: 1px solid #696989;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

Pavyzdys . Reikšmė flex-end + elemento matmenys

Dabar elementai bus prispausiami prie apačios:

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

css#parent {
  display: flex;
  align-items: flex-end;
  flex-direction: row;
  border: 1px solid #696989;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

Pavyzdys . Reikšmė center + elemento matmenys

Dabar elementai bus išdėstyti centre išilgai skersinės ašies (šiuo atveju vertikaliai):

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

css#parent {
  display: flex;
  align-items: center;
  flex-direction: row;
  border: 1px solid #696989;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

Pavyzdys . Reikšmė center, skirtingų dydžių elementai

Dabar elementai turi skirtingą aukštį (dabar jie išsiplečia dėl teksto, bet galima nustatyti ir height), plotis visiems vienodas, kadangi nustatyta savybė width:

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

css#parent {
  display: flex;
  align-items: center;
  flex-direction: row;
  border: 1px solid #696989;
}
#parent > div {
  width: 100px;
  border: 1px solid #696989;
}

Результат:

Pavyzdys . Reikšmė baseline, skirtingų dydžių elementai

O taip atrodo lygiavimas pagal bazinę liniją:

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

css#parent {
  display: flex;
  align-items: baseline;
  flex-direction: row;
  border: 1px solid #696989;
}
#parent > div {
  width: 130px;
  line-height: 1;
  border: 1px solid #696989;
}

Результат:

Pavyzdys . Lygiavimas pagal vertikalios ašies pradžią garde

Išlyginkime savo elementus langeliuose pagal vertikalios ašies pradžią:

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

css#parent {
  display: grid;
  align-items: flex-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;
}

Результат:

O dabar pažiūrėkime į mūsų gardą naršyklės žvalgyklėje:

Pavyzdys . Lygiavimas vertikalios ašies centre garde

O dabar išlyginkime savo elementus langeliuose vertikalios ašies centre:

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

css#parent {
  display: grid;
  align-items: 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;
}

Результат:

Pažiūrėkime, kaip atrodo gardas žvalgyklėje:

Pavyzdys . Lygiavimas pagal vertikalios ašies pabaigą garde

Vėl pakeiskime elementų lygiavimą, šį kartą pagal vertikalios ašies pabaigą:

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

css#parent {
  display: grid;
  align-items: 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;
}
#elem1 {
  
}

Результат:

O dabar pažiūrėkime kaip atrodo mūsų gardas per žvalgyklę:

Taip pat žiūrėkite