为什么边距会影响我的内联块 div 是否会使用 flex-start 与顶部对齐

Question

我只是在学习css和html，我想更好地理解事情。

在内联块中显示 3 个div 时，我想将它们全部对齐到弹性框部分的顶部。似乎"对齐项目：弹性启动;"是应该这样做的代码，但div 没有反应。我正在尝试不同的事情，一旦我将"margin：1vmax;"添加到div 属性中，它就会起作用。为什么没有它就行不通？这里的基本原则是什么？

        section{
            background:cadetblue;
            padding: 20px 20px;
            display: flex;
            flex-direction: row;
            align-items: flex-start;
        }
        div{
            background:black;
            color: white;
            height:auto;
            width: 25%;
            padding: 0.5em 2em;
            margin:1vmax;
            text-align: justify;
            text-justify:inter-word;

        } 

Answer 1

        Hey there is nothing wrong in the code you didn't added any content in the div's so that's why you are not able to see the difference.
          <section>
            <div></div>
                <div> Your reducer function's returned value is assigned to the accumulator, whose value is remembered across each iteration throughout the array and ultimately becomes the final, single resulting value.</div>
            <div> sfsdfsfs s sf sf s s saf sa saf</div>
          </section>
     section{
                background:cadetblue;
                padding: 20px 20px;
                display: flex;
                flex-direction: row;
                align-items: flex-start;
            }
            div{
                background:black;
                color: white;
                height:auto;
                width: 25%;
                padding: 0.5em 2em;
                margin:1vmax;
                text-align: justify;
                text-justify:inter-word;
            } 
check here:https://jsbin.com/yevipowusi/edit?html,css,js,output