Skip to content
OverviewSolutions
5
Comments
1
Victor Jacon
@Victor-Jacon

All comments

  • Victor Jacon•75
    @Victor-Jacon

    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

    Marked as helpful