Вопросы с тегом «flexbox»

Я планирую отказаться от «плавных» макетов и использовать CSS Flexbox для будущих проектов. Я был рад увидеть, что все основные браузеры в их текущих версиях, похоже, поддерживают (так или иначе) flexbox. Я перешел в раздел «Решено с помощью Flexbox», чтобы посмотреть на несколько примеров. Однако пример «липкого нижнего колонтитула», похоже, …

117 html  css  flexbox  cross-browser 

У меня есть простая веб-страница с некоторым содержанием Lipsum по центру страницы. Страница отлично работает в Chrome и Firefox. Если я уменьшу размер окна, содержимое будет заполнять окно до тех пор, пока оно не станет невозможным, а затем добавит полосу прокрутки и заполнит содержимое за пределами экрана в нижней части. …

116 internet-explorer  css  flexbox  internet-explorer-11 

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

114 html  css  flexbox 

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

110 css  flexbox  grid-layout  css-grid 

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

107 css  flexbox  css-position  sticky 

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

104 html  css  flexbox 

у меня есть <div class="parent"> <div class="child" style="float:right"> Ignore parent? </div> <div> another child </div> </div> У родителя есть .parent { display: flex; } Для своего первого ребенка я хочу просто переместить предмет вправо. И другие мои div, чтобы следовать правилу гибкости, установленному родителем. Возможно ли это? Если нет, как …

103 html  css  flexbox 

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

102 html  css  flexbox 

Я использовал макет гибкого блока CSS, который выглядит, как показано ниже: Если экран становится меньше, он превращается в это: Проблема в том, что размеры изображений не изменяются, сохраняя пропорции исходного изображения. Можно ли использовать чистый CSS и макет гибкого блока, чтобы разрешить изменение размера изображений, если экран становится меньше? Вот …

99 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 

Как видите, list-itemsу первого rowесть то же самое height. А вот предметы во втором у rowних разные heights. Я хочу, чтобы у всех предметов была униформа height. Есть ли способ добиться этого без указания фиксированной высоты и только с помощью flexbox ? Вот мой code .list { display: flex; flex-wrap: …

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: { …

93 position  react-native  flexbox  absolute