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

Я планую відійти від "плавучих" макетів та використовувати CSS flexbox для майбутніх проектів. Мені було приємно бачити, що всі основні браузери в їхніх нинішніх версіях, здається, підтримують (так чи інакше) флексбокс. Я попрямував до "Вирішений Flexbox", щоб переглянути деякі приклади. Однак приклад "Sticky Footer", схоже, не працює в Internet Explorer …

117 html  css  flexbox  cross-browser 

У мене є проста веб-сторінка з деяким вмістом Lipsum, яка зосереджена на сторінці. Сторінка чудово працює в Chrome і Firefox. Якщо я зменшу розмір вікна, вміст заповнює вікно, поки воно не зможе, а потім додає смугу прокрутки і заповнює вміст поза екраном, донизу. Однак сторінка не центрується в IE11. Я …

116 internet-explorer  css  flexbox  internet-explorer-11 

Використовуючи модель CSS flex box, як я можу змусити зображення підтримувати його співвідношення сторін? JS Fiddle: http://jsfiddle.net/xLc2Le0k/2/ Зауважте, що зображення розтягуються або зменшуються, щоб заповнити ширину контейнера. Це добре, але чи можемо ми його також розтягнути або зменшити висоту, щоб зберегти пропорції зображення? HTML <div class="slider"> <img src="http://www.placebacon.net/400/300" alt="Bacn"> <img …

114 html  css  flexbox 

Я трохи затримався на цьому і думав поділитися цим position: sticky+ flexbox gotcha: Мій липкий div працював нормально, поки я не переключив свій погляд на контейнер flex box, і раптом div не став липким, коли його загорнули у батьківський файл flexbox. .flexbox-wrapper { display: flex; height: 600px; } .regular { …

106 css  flexbox  css-position  sticky 

Я маю <div class="parent"> <div class="child" style="float:right"> Ignore parent? </div> <div> another child </div> </div> У батьків є .parent { display: flex; } Для своєї першої дитини я хочу просто перемістити предмет праворуч. І інші мої div, щоб слідувати правилу flex, встановленому батьком. Це щось можливо? Якщо ні, як мені …

103 html  css  flexbox 

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

102 html  css  flexbox 

Я хочу використовувати повнорозмірний додаток за допомогою flexbox. Я знайшов те, що хочу, використовуючи старий модуль макета flexbox ( display: box;та інші речі) за цим посиланням: CSS3 Flexbox full-height app and overflow Це правильне рішення для браузерів, які підтримують лише стару версію властивостей CSS flexbox. Якщо я хочу спробувати використовувати …

101 html  css  flexbox 

Я вважаю, що цього неможливо досягти за допомогою Flexbox, оскільки кожен рядок може бути лише мінімальною висотою, необхідною для розміщення його елементів, але чи можна цього досягти за допомогою новішої CSS Grid? Щоб було зрозуміло, я хочу однакову висоту для всіх елементів у сітці по всіх рядках, а не лише …

101 css  flexbox  grid-layout  css-grid 

Я використовував макет CSS flex box, який відображається, як показано нижче: Якщо екран стає менше, це перетворюється на таке: Проблема полягає в тому, що розміри зображень не змінюються, зберігаючи пропорції до вихідного зображення. Чи можна за допомогою чистого CSS та макета flex box змінити розмір зображень, якщо екран стає менше? …

98 html  css  flexbox 

Це питання стосується браузера з повною підтримкою css3, включаючи flexbox. У мене є гнучкий контейнер з деякими предметами. Всі вони виправдані, щоб почати з флекс-старту, але я хочу, щоб останній .end пункт був виправданий для флекс-кінця. Чи є хороший спосіб зробити це, не змінюючи HTML і не вдаючись до абсолютного …

97 css  flexbox 

Мені потрібна допомога, щоб вирішити проблему, мені потрібно відцентрувати вміст усередині стовпця в bootstrap4, будь ласка, знайдіть мій код нижче <div class="container"> <div class="row justify-content-center"> <div class="col-3"> <div class="nauk-info-connections"> </div> </div> </div>

95 twitter-bootstrap  flexbox  bootstrap-4 

Зразок: div { display: flex; height: 200px; background: tan; } span { background: red; } <div> <span>This is some text.</span> </div> Запустіть фрагмент кодуСховати результатиРозгорніть фрагмент У мене є два запитання: Чому це відбувається в основному з span? Який правильний підхід, щоб запобігти його розтягуванню, не впливаючи на інші елементи …

94 html  css  flexbox 

Я хочу зробити divпалицю у верхній частині екрана без будь-якого впливу на інші елементи, а її дочірній елемент у центрі. .parent { display: flex; justify-content: center; position: absolute; } <div class="parent"> <div class="child">text</div> </div> Запустіть фрагмент кодуСховати результатиРозгорніть фрагмент Коли я додаю position: absoluteрядок, justify-content: centerстає недійсним. Чи конфліктують вони …

93 css  react-native  flexbox 

Здається, що при position:absoluteвикористанні елемент не може бути відцентрований за допомогою justifyContentабо alignItems. Існує обхідний спосіб використання, marginLeftале він не відображається однаково для всіх пристроїв, навіть використовуючи розміри для виявлення висоти та ширини пристрою. bottom: { position: 'absolute', justifyContent: 'center', alignItems: 'center', top: height*0.93, marginLeft: width*0.18, }, bottomNav: { flexDirection: …

92 position  react-native  flexbox  absolute 

Я намагаюся відцентрувати внутрішні елементи <button>-tag за допомогою flexbox justify-content: center. Але Safari їх не центрує. Я можу застосувати той самий стиль до будь-яких інших тегів, і він працює за призначенням (див. <p>-Tag). Тільки кнопка вирівняна за лівим краєм. Спробуйте Firefox або Chrome, і ви побачите різницю. Чи є якийсь …

91 html  css  safari  flexbox  css-grid