时间戳

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

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

问题描述

我只是在学习 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;


        }

标签： htmlcsslayoutflexboxvertical-alignment

解决方案

        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

推荐阅读