Uitlyning van 'n individuele element in die fleksmodel in CSS

Die volgende eienskappe wat ons gaan bestudeer, word nie aan die ouer van die fleks-elemente toegeken nie, maar aan die elemente self. Kom ons kyk na die eienskap align-self, wat 'n individuele blok langs die dwarsspasie belyn.

Kom ons het fleksblokke wat in 'n ry gerangskik is. Laat ons hulle vertikaal in die middel belyn, deur align-items die waarde center te gee, en aan die tweede element gee ons 'n addisionele klas elem en ken daarvoor 'n ander uitlyning, byvoorbeeld, laat ons dit teen die boonste rand vasdruk.

Om dit te doen, stel ons die eienskap align-self vir ons element met klas elem in op die waarde flex-start:

html<div class="parent">
  <div class="child">1</div>
  <div class="child elem">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
</div>

css.parent {
  display: flex;
  align-items: center;
  width: 300px;
  height: 200px;
  border: 1px solid red;
}
.child {
  width: 50px;
  height: 50px;
  border: 1px solid green;
}
.elem {
  align-self: flex-start;
}

Результат: