Как сделать так, чтобы поля работали одинаково в гибком контейнере и вне его? - PullRequest
Новая
       26

Как сделать так, чтобы поля работали одинаково в гибком контейнере и вне его?

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

У меня проблема. при использовании поля внутри флексбокса он должен быть в два раза больше того, чем должен быть (как будто он не сталкивается или около того)

Вот где у меня проблема: jsfiddle Это код: 

<div style="height: 350px;">
<div style="height: 182px; display: flex; justify-content: flex-end; flex-direction: column;">
<div style="margin: 5px; height: 94.5px; width: 80px; background-color: red;"></div>
<div style="margin: 5px; height: 94.5px; width: 80px; background-color: red;"></div>
<div style="margin: 5px; height: 87.5px; width: 80px; background-color: brown;"></div>
</div>
<div style="margin: 5px; height: 31.5px; width: 80px; background-color: green;"></div>
<div style="margin: 5px; height: 31.5px; width: 80px; background-color: green;"></div>
<div style="margin: 5px; height: 52.5px; width: 80px; background-color: yellow;"></div>
<div style="margin: 5px; height: 52.5px; width: 80px; background-color: yellow;"></div>
</div>

В чем причина этого? И как сделать так, чтобы поле работало одинаково как на гибком контейнере, так и вне его?

Ответы [ 3 ]

1 голос
/ 13 июня 2019

Это не удваивает размер внутри flexbox.Во flexbox поле считается верхним div, а также нижним div 

i.e. total margin = upper div margin + lower div margin

, но вне flexbox поле считается 

max (upper div margin, lower div margin ).

.явление называется Сжатие полей .

Сжатие полей

Верхние и нижние поля элементов иногда сворачиваются в одинмаржа, равная наибольшему из двух полей.Этого не происходит на левом и правом краях!Только верхний и нижний поля!

1 голос
/ 13 июня 2019

Почему это так?
Свертывание полей работает в контексте форматирования блока , а не в контексте форматирования flex.
Здесь - это @ Michael_B ответ, объясняющий причину этого.

Как получить складное поле?
Один из способов - обернуть 3 блока div с помощью div.Там может быть лучший способ, но вы можете попробовать и поделиться здесь.

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

Спасибо за ответы!Я многому научился!

Я пришел к простому решению: margin: 0px 5px 5px 5px;

Я не знаю, почему я не придумал это раньше.

Вы можете видеть, что это работает сейчас здесь 

<div style="height: 350px;">
<div style="height: 182px; display: flex; justify-content: flex-end; flex-direction: column;">
<div style="margin: 0px 5px 5px 5px; height: 94.5px; width: 80px; background-color: red; display: inline-block;"></div>
<div style="margin: 0px 5px 5px 5px; height: 94.5px; width: 80px; background-color: red; display: inline-block;"></div>
<div style="margin: 0px 5px 5px 5px; height: 87.5px; width: 80px; background-color: brown; display: inline-block;"></div>
</div>
<div style="margin: 0px 5px 5px 5px; height: 31.5px; width: 80px; background-color: green;"></div>
<div style="margin: 0px 5px 5px 5px; height: 31.5px; width: 80px; background-color: green;"></div>
<div style="margin: 0px 5px 5px 5px; height: 52.5px; width: 80px; background-color: yellow;"></div>
<div style="margin: 0px 5px 5px 5px; height: 52.5px; width: 80px; background-color: yellow;"></div>
</div>
...