Egenskaben flex-basis

Egenskaben flex-basis angiver størrelsen på en specifik flex-blok før de øvrige flex-egenskaber anvendes på den. Generelt set angiver egenskaben elementets størrelse langs hovedaksen. Det betyder, at hvis hovedaksen er vandret - vil denne egenskab angive elementernes bredde, og hvis den er lodret - vil den angive højden.

Anvendes på en specifik flex-blok.

Denne egenskab er en del af sammentrukket egenskab flex.

Syntaks

cssselektor {
  flex-basis: enhver CSS-enhed (og procenter) | auto;
}

Standardværdi: auto.

Eksempel

Lad os antage, at hovedaksen er vandret, og flex-basis har værdien 50px. I dette tilfælde vil elementernes bredde være 50px:

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

css.parent  {
  display: flex;
  flex-direction: row; /* aksen er vandret */
  width: 300px;
  height: 300px;
  border: 1px solid red;
}
.child {
  flex-basis: 50px; /* elementets størrelse */
  border: 1px solid green;
}

Результат:

Eksempel

Lad os nu vende aksen uden at ændre værdien af egenskaben flex-basis. I dette tilfælde vil elementernes højde være 50px:

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

css.parent {
  display: flex;
  flex-direction: column; /* aksen er lodret */
  width: 300px;
  height: 300px;
  border: 1px solid red;
}
.child {
  flex-basis: 50px;
  border: 1px solid green;
}

Результат:

Se også