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

【问题标题】：Why does the margin affect whether my inline-block divs will align to the top using flex-start?为什么边距会影响我的内联块 div 是否会使用 flex-start 对齐到顶部？
【发布时间】：2019-10-24 01:55:56
【问题描述】：

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

在内联块中显示 3 个 div 时，我想将它们全部对齐到 flexbox 部分的顶部。看起来像“align-items: flex-start;”是应该这样做的代码，但 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;


        }

【问题讨论】：

...但我怀疑你想要的是 align-content 而不是 align-items
css-tricks.com/almanac/properties/a/align-content
@Indraneelan nope，你的代码没有边距工作，问题出在其他元素上：codepen.io/ya3ya6/pen/zQgbaq

标签： html css layout flexbox vertical-alignment

【解决方案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

【讨论】：