Въпреки че имам процентни ширини, зададени надетските елементи на моя контейнер за контейнери с флексбокс, изглежда, че ги пренебрегват или поне ги правят малко по-различни. Това означава, че когато 3 елемента трябва да бъдат подред, само 2 са показани.
Ето кода на CodePen, който показва проблема: http://codepen.io/moy/pen/BWLKbo
Както можете да видите, на всеки работен плот всеки елемент от списъка трябва да е 33,33333% широк. Това не се случва на първия ред? Заслужава да се отбележи, че моите префикси се добавят чрез Autoprefixer.
Веднага след като премахнете display: flex от .mosaic списъкът се позиционира в редове. Така че това е гъвкавата кутия, която я причинява. Имам нужда от това, за да се уверя, че всички елементи от списъка са със същата височина в един ред.
Опитах да използвам flex: 1 0 auto; който е споменат на друга длъжност, но това не изглежда да работи тази ситуация. "Аз не съм използвал flexbox много, така че знанията ми е много основен, така че може би ценностите просто се нуждаят от промяна?
Надявам се, че някой може да помогне с това! :)
Отговори:
1 за отговор № 1Това изглежда е грешка при закръгляване на някои видове в оформлението на двигателя. На мобилния сафари поне мога да го накарам да работи, като променя ширината до 33% и не 33.33333%, Ако това не пречи на другите дизайни на страницата, това би могло да бъде решението.
1 за отговор № 2
Изглежда, че проблемът е причините за: преди / след като псевдо елементите се предават като "твърди" или имат някаква форма на съдържание. Така че настройка width: 0; или content: normal; изглежда да разреши проблема.
Така че на контейнера CSS (scss) ще бъде:
.mosaic {
@include clearfix;
display: flex;
flex-wrap: wrap;
list-style: none;
margin: 0 0 $vertical-spacing;
padding-left: 0;
width: 100%;
&:before,
&:after {
content: normal;
}
}
Надявам се, че помага на някой друг! Много досадно и разочароващо бъг! :)