Почему маржа влияет на то, будут ли мои div-блоки inline-block выровнены по верху с помощью flex-start? - PullRequest
Новая
       37

Почему маржа влияет на то, будут ли мои div-блоки inline-block выровнены по верху с помощью flex-start?

0 голосов
/ 09 июня 2019

Я только изучаю css и html, и я хотел бы лучше понять вещи.

При отображении 3-х делений во встроенном блоке я хотел выровнять их все по верху секции 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;


        }

1 Ответ

0 голосов
/ 10 июня 2019 
        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
...