Flexbox - problem


1

Искам да питам дали някой се пробва с flexbox да направи нещо? При мен не се получава и вече издивявам >:о

Пиша в директния родител:

display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox;      /* TWEENER - IE 10 */
display: -webkit-flex;     /* NEW - Chrome */
display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */

flex-flow: row nowrap;

justify-content: space-around;
align-items: center;
align-content: center;

А детето ръчкам с align-self: auto; или margin: auto; както е дадено в

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

и резултата ми е никакъв.

Успях само в Мозила 46 версия да постигна незадоволителен резултат. Но в хром нищо не се променя.

Доколкото разбирам FlexBox не се влияе от маргини и падинги, нямам и позиционирани елементи.

Някакви идеи къде може да греша?

Също така се чудех дали се наследява този дисплей? Ако можеше еднократно да се пише в бодито и от там да се ползва за всички деца :0 хмм мечти.




Отговори



2
Аз правих някакви неща с flexbox ама си го ползвах  чисто: display: flex;  и работи на новите версии на всички(без IE разбира се) браузъри.  Честно казано не съм го пробвала за по-стари все още. Ама е доста яко, всичко си става супер бързо и приятно :)

от polya_vi (92 точки)


2

И аз го ползвах за задачата "Music Categories". Родителя с display: flex, детето с margin:auto; Падингите си работят нормално. Ползвала съм и flex-direction, align-items, align-content,  justify-content. Всичко работи както е описано в https://css-tricks.com/snippets/css/a-guide-to-flexbox/

И при мен се държи много добре на Chrome, не работи в IE.

Точно твоята комбинация не съм я ползвала. Но започни с нещо простичко.

.parent{ display: flex; flex-direction: column; align-items:center; } .child{ margin:auto; }

И ако работи няма причина и останалото да не работи. Добавяй всичко едно по едно, за да видиш какво е поведението. Успех!


от Mirka (1454 точки)


0

Благодаря момичета!

Утрото е по-мъдро от вечерта :)

Вчера се опитвах да приложа подравняването за (3та задача логин) хеадъра има няколко елемента:

    img + label + input + input + button

които не са в отделни дивове. Проблема явно е в това, че трябва да се сложат в някакъв див за да се аплайнат тези стойности. До сега директно се обръщах към хтмл елемента или добавях клас за алайн на детето.

Фиксове по домашното - днес. Утре проверки. И после цяла седмица ще експериментирам :0

Успех! :)


от piperche (296 точки)