CODEWITHSUNDEEP
htmlcssflexbox
Abdelbasset Belaid
Abdelbasset Belaid

Reputation: 139

vertical and horizontal stretch items with flexbox

stretch items using flex follow this context:

flex-direction: row; & align-items: stretch; ==> vertical stretch

flex-direction: column; & align-items: stretch; ==> horizontal stretch

my problem: i have direction is row ,but i want vertical and horizontal stretch to appear like columns. symmetrical

.inner {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
}

.inner button {
  display: flex;
  align-items: center;
  background-color: #E3F2FD;
  color: #304FFE;
  border: 1px solid #304FFE;
  padding-block: 5px;
  padding-inline: 6px;
  border-radius: 4px;
  margin-block: 2px;
  margin-inline: 10px;
}
<div class="inner">
  <button>Brightness</button>
  <button>Contrast</button>
  <button>Grayscale</button>
  <button>Saturate</button>
  <button>Sepia</button>
  <button>Invert</button>
</div>

my output:

enter image description here

my purpose: enter image description here

Upvotes: 1

Views: 471

Answers (1)

Laaouatni Anas
Laaouatni Anas

Reputation: 3788

add flex: 1; to the <button> html element.

enter image description here

like so:

.inner button {
  flex: 1;
  /* other code */
}

this means if there is some space left,
CSS flexbox tries to take all the space it can have.

also flex: 1 is a shorthand that can be also:

flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;

like he said @G-Cyrillus it can break your code:

so put it inside a @media so only mobile versions have this behaviur

details: https://developer.mozilla.org/en-US/docs/Web/CSS/flex?retiredLocale=it

Upvotes: 2

Related Questions