CSS: как правильно использовать display = flex? - PullRequest
Новая
       6

CSS: как правильно использовать display = flex?

0 голосов
/ 19 сентября 2019

Итак, я использую сеточную систему Bootstrap и обнаружил проблему, когда столбцы имеют разную высоту в зависимости от содержимого.Я искал в сети и наткнулся на flex.

Кажется, он работает очень хорошо.Проблема, с которой я столкнулся, заключается в том, что при тестировании страницы на рабочем столе путем уменьшения ширины браузера она неожиданно выравнивается (см. Скриншоты ниже).

Я также тестировал на iPhone, и дисплейнапутал на портрете.Это хорошо на ландшафте.На iPad нет никаких проблем, так как я думаю, что он не достигает необходимой ширины для появления проблем.

Любые идеи о том, как исправить?

my css (Нечетные / четные классы - это просто чередование строк, чтобы их было легче увидеть) 

div.table {
    margin: 0;
}

div.table-flex {
    display: flex;
    flex-wrap: wrap;
}

div.table div {
    padding: 12px;
}

div.table-flex [class*="col-"] {
    display: flex;
    flex-direction: column;
}

div.table div.odd {
    background-color: rgb(216, 216, 216);
    border: 1px solid white;
}

div.table div.even {
    background-color: rgb(238, 238, 238);
    border: 1px solid white;
}

мой html 

<div class="row table table-flex">
    <div class="col-sm-12 col-md-3 col-lg-3 odd">Mr First Last</div>
    <div class="col-sm-12 col-md-2 col-lg-2 even">12345</div>
    <div class="col-sm-12 col-md-3 col-lg-3 odd">CEO</div>
    <div class="col-sm-12 col-md-4 col-lg-4 even">Acme Corporation</div>
</div>

сетка ещеотображая ok (в этот момент инспектор Firefox говорит, что ширина составляет около 510 пикселей) grid still displaying ok

с отображением выше, я немного уменьшил ширину браузераи он перешел к этому (странная часть в том, что я ожидал, что инспектор Firefox скажет, что ширина меньше, так как я уменьшал ширину браузера, но он увеличился до 542) from the display ok above, I reduced the width a bit and it turned to this

1 Ответ

0 голосов
/ 19 сентября 2019

Я не могу дать вам прямой ответ, поскольку нам ничего не предоставлено, но ваш элемент flex может увеличиваться, поскольку браузер настраивается по мере увеличения ширины.Попробуйте добавить 

  flex-grow :0

Это свойство указывает гибкому элементу не расти, если для его роста достаточно места.По умолчанию он равен 1. Хотя это предотвратит его рост для браузеров большего размера, а если вы захотите увеличить его, это может быть не вашим выбором.Попробуйте и дайте мне знать.Я обновлю свой ответ, как только вы предоставите фрагменты

ОБНОВЛЕННЫЙ ОТВЕТ -

Мне удалось решить вашу проблему, но я не уверен, насколько это то, что вы хотите.Проблема заключается в 

div.table-flex 
{
   display: flex;
   flex-wrap: wrap;

} .

В вашем CSS-файле два практически идентичных элемента, и я не уверен, почему, но они, похоже, сбивают с толку браузер.Как только я добавил свойства flex-direction и flex-grow, он заработал.Посмотрите, дайте мне знать. 

div.table 
{
margin: 0;
}

div.table-flex 
{
display: flex;
flex-wrap: wrap;
flex-direction: column;
flex-grow: 0;
}

div.table div 
{
padding: 12px;
}

div.table-flex [class*="col-"] 
{
display: flex;
flex-direction: column;
flex-grow: 0;
}

div.table div.odd 
{
background-color: rgb(216, 216, 216);
border: 1px solid white;
}

div.table div.even {
background-color: rgb(238, 238, 238);
border: 1px solid white;
}

Взгляните на эту скрипку.https://jsfiddle.net/zrvx06yw/

...