HTML and CSS

Community feedback

• 

  Victor Jacon•75

  @Victor-Jacon

  Posted almost 4 years ago

  Hey there!

  To stretch you need to use flexbox, and use the "align-items: stretch"

  In order to work you need to put that "align-items: stretch" in the parent div, for example:

  <div class"stretch> <div> The content you want to stretch </div> <div>

  Using flexbox you can only define one kind of alignment per "container". If your design needs a more complex alignment, you will need to use css grid.

  Also: By default, the flexbox css components will always occupy all the space available on screen. To "play" with this functionality, use ON THE FLEX ITEM: flex-basis: 0; and flex-grow: 0;

  For example:

  <div class"stretch> <a class="flex-item"> The content you want to play with the sizes </a> <a class="flex-item"> The content you want to play with the sizes </a> <div>

  .flex-item { flex-basis: 0; flex-grow: 0; }

  Here's some code I made to help people understand this concept, copy this github repository, and run on your pc: https://github.com/Victor-Jacon/css-general-practice/tree/main/css-flebox

  Hope it helps <3

  00

  Marked as helpful