0

Recently, I was searching for the difference between the "align-content" and "align-items" property of flexbox.

I came across this answer on StakeOverflow.

Now it says two things, that I can't understand:

  1. The "align-items" property is similar to the "justify-content" property of flexbox but on the perpendicular axis.
  2. the "align-content" only works on multi-line flexbox.

So... My question is, if the "align-items" property is similar to the "justify-content" then why it don't accept all the values that the "justify-content" property accepts. such as "space-around" or "space-evenly"?

And the second problem is, the "align-content" is also working for single line flexbox. Look:

        .cont{
            height:150px;
            border: 2px solid red;
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
            resize: both;
            overflow: scroll;
            align-content: flex-end;
            /* align-items: flex-end; */
        }

        .items{
            background-color: rgb(203, 151, 83);
            width: 50px;
            height: 50px;
            text-align: center;
        }
<body>
    <div class="cont">
        <div class="items">1</div>
        <div class="items">2</div>
        <div class="items">3</div>
        <div class="items">4</div>
        <div class="items">5</div>
    </div>
</body>

And I'm not randomly asking this question, I first read all the answers and comments on that question and also commented on it about this but no one replied.

Utsav Meena
  • 141
  • 1
  • 5

1 Answers1

1

And the second problem is, the "align-content" is also working for single line flexbox.

You need to know what defines "single line" and it's not the fact that your items are inside a single line. It's related to the flex-wrap property. From the specification

The flex-wrap property controls whether the flex container is single-line or multi-line, and the direction of the cross-axis, which determines the direction new lines are stacked in.

nowrap

The flex container is single-line.

wrap

The flex container is multi-line.

You are using flex-wrap: wrap so you have a multi-line configuration even if you actually have one line because all your elements can fit inside one line.

My question is, if the "align-items" property is similar to the "justify-content" then why it don't accept all the values that the "justify-content" property accepts

I wouldn't say similar because it's a complete different property. Justify-content will align multiple items inside the main axis but align-items will align items in the cross axis. Your items are placed next to each other so in the main axis we can talk about space-between, space-around, etc but on the cross axis each item is alone so you can align it inside the line not in relation to any other item.

In other words, there is no item above or below another one if you consider one line but we have items next to each other inside one line. The concept of spacing items is only available on the main axis.

Temani Afif
  • 245,468
  • 26
  • 309
  • 415