Запитання з тегом «flexbox»

Я хочу, щоб гнучкі елементи були відцентровані, але коли у нас є другий рядок, щоб їх було 5 (з малюнка нижче) під 1, а не по центру в батьківському. Ось приклад того, що я маю: ul { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; margin: 0; padding: 0; } …

91 html  css  flexbox 

Як бачите, list-itemsу першого rowє те саме height. Але предмети другого rowмають різні heights. Я хочу, щоб усі предмети мали форму height. Чи є спосіб досягти цього, не даючи фіксованої висоти і лише використовуючи flexbox ? Ось моя code .list { display: flex; flex-wrap: wrap; max-width: 500px; } .list-item { …

91 html  css  flexbox 

У мене є гнучкий контейнер з двома гнучкими предметами. Я хочу встановити верхнє поле для другого, але лише тоді, коли воно загорнуте, а не на першому гнучкому рядку. Якщо можливо, я хочу уникати використання медіа-запитів. Я думав, що margin-bottom на першому елементі може бути рішенням. Однак це додає місця внизу, …

89 css  margin  flexbox 

У мене є два елементи всередині контейнера, які розташовані поруч за допомогою гнучкого вікна. Для другого елемента ( .flexbox-2) я встановлюю його висоту в CSS. Однак тоді перший елемент ( .flexbox-1) буде відповідати висоті .flexbox-2. Як би я зупинився .flexbox-1від відповідності висоті .flexbox-2, а замість цього просто зберіг свою природну …

85 html  css  flexbox 

Вчора я отримав веб-сайт у школі, який використовує твердження CSS 3 flexbox. Я ніколи раніше цим не користувався. Тож я трохи погуглив і знайшов багато різних стилів операторів flexbox. Деякі хлопці пишуть display: box;, деякі використовують display: flexbox;і інше display: flex;. То які відмінності? Що я повинен використовувати?

83 css  flexbox 

Я в процесі оновлення старої inline-blockмоделі сітки, яку я маю, до нової моделі Flexbox, яку я створив. Все працювало нормально, крім однієї маленької зачепки, яка стала дещо зламаною: У мене є купа повзунків, керованих CSS; отже, там є обгортка, що містить ширину 100%, а всередині інший div: її ширина також …

82 css  flexbox 

Як я можу встановити першу дочірню систему flexbox на всю ширину, а всі інші дочірні пристрої - на flex:1(для розділеного простору)? Подобається це:

79 css  flexbox 

Стовпці сітки з тегами списку, мені потрібно відображати у правильному порядку на кожні 3 стовпці, з увімкненою автоматичною шириною для всіх додаткових елементів списку HTML. Це мій приклад: <style> ul { margin: 0; padding: 0; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: …

78 html  css  flexbox 

http://jsfiddle.net/XW9Se/ Я встановив width: 200px;ліворуч, <div>але якщо я переглядаю його за допомогою інструмента інспектора браузера, то виявляється, що реальна ширина є випадковою або щось інше. Він постійно змінюється залежно від розміру вікна. Чому ширина не набуває чинності? РЕДАГУВАТИ : Якщо я видалю, width: 100%ширина залишається фіксованою. Але мені потрібно , …

78 css  width  flexbox 

Напевно, це досить просте питання, але я не можу отримати 3 елементи у контейнері flex для відображення у 2 рядки, один у першому рядку та інші 2 у другому рядку. Це CSS для flex-контейнера. Очевидно, він відображає 3 елементи в одному рядку :) div.intro_container { width: 100%; display: flex; flex-direction: …

77 css  flexbox 

Я розробив макет на 100% по ширині на 100% по висоті за допомогою cbox3 flexbox, який працює як на IE11 (так і на IE10, якщо емуляція IE11 правильна). Але Firefox (35.0.1), overflow-y не працює. Як ви можете бачити в цьому кодепені: http://codepen.io/anon/pen/NPYVga firefox неправильно відображає переповнення. Він показує одну смугу …

76 css  firefox  overflow  flexbox 

У мене є макет flexbox, що містить два елементи. Один з них використовує padding-bottom : Показати фрагмент коду #flexBox { border: 1px solid red; width: 50%; margin: 0 auto; padding: 1em; display: flex; flex-direction: column; } #text { border: 1px solid green; padding: .5em; } #padding { margin: 1em 0; …

75 css  padding  flexbox  aspect-ratio 

Я центрирую DIV всередині іншого DIV за допомогою флекси. Придумайте діалогове вікно, яке спливе в центрі екрана, коли це необхідно. Це працює чудово, однак це виглядало б набагато краще, якби простір над і під діалоговим вікном був не рівним, маючи 40% решти місця вище, а 60% нижче діалогового. Це стає …

23 html  css  flexbox  centering 

Я намагаюся створити систему меню із зображенням та текстом зверху та знизу. Дані динамічні. Я хочу, щоб система меню виглядала так, щоб кожне зображення було на однаковій відстані один від одного, щоб вони вишикувалися в сітку зображень як горизонтально, так і вертикально. Проблема - текст. Якщо текст довший за зображення, …

17 html  css  flexbox 

Відображення галереї зображень зображень різного розміру та співвідношення із наступними характеристиками: Немає пробілів (поля) між зображеннями. Поважаючи оригінальне співвідношення максимально. Зображення оточені посиланням. Не-JS рішення. Зображення можна було трохи обрізати. Портативне рішення. Набір зображень, що відображаються, випадковий. Зображення повинні відображатися зліва направо (запобігає використанню стовпців). Я домігся цього за допомогою …

9 css  flexbox  image-gallery