Мне нужно реализовать довольно нестандартную планировку кладки. Однако по ряду причин я не хочу использовать для этого JavaScript. Параметры: Все элементы имеют одинаковую ширину Элементы имеют высоту, которую невозможно вычислить на стороне сервера (изображение плюс различное количество текста) Я...
Как мы все знаем, flexсвойство является обобщающим для flex-grow, flex-shrink, и flex-basisсвойства. Его значение по умолчанию 0 1 auto, что означает flex-grow: 0; flex-shrink: 1; flex-basis: auto; но я заметил, во многих местах flex: 1используется. Это сокращение от 1 1 autoили 1 0 auto? Я не...
С помощью типичного CSS я мог бы разместить один из двух столбцов влево, а другой вправо с небольшим промежутком между ними. Как мне это сделать с помощью flexbox? http://jsfiddle.net/1sp9jd32/ #container { width: 500px; border: solid 1px #000; display: -webkit-flex; display: -ms-flexbox; display:...
Я нашел эту ветку - Как вы растягиваете изображение, чтобы заполнить <div>, сохраняя при этом соотношение сторон изображения? - это не совсем то, что мне нужно. У меня есть div определенного размера и изображение внутри него. Я хочу всегда заполнять div изображением, независимо от того,...
Я планирую отказаться от «плавных» макетов и использовать CSS Flexbox для будущих проектов. Я был рад увидеть, что все основные браузеры в их текущих версиях, похоже, поддерживают (так или иначе) flexbox. Я перешел в раздел «Решено с помощью Flexbox», чтобы посмотреть на несколько примеров. Однако...
У меня есть простая веб-страница с некоторым содержанием Lipsum по центру страницы. Страница отлично работает в Chrome и Firefox. Если я уменьшу размер окна, содержимое будет заполнять окно до тех пор, пока оно не станет невозможным, а затем добавит полосу прокрутки и заполнит содержимое за...
Как с помощью модели гибкого бокса CSS заставить изображение сохранять свое соотношение сторон? JS Fiddle: http://jsfiddle.net/xLc2Le0k/2/ Обратите внимание, что изображения растягиваются или сжимаются, чтобы заполнить ширину контейнера. Это нормально, но можно ли растянуть или уменьшить высоту,...
Я так понимаю, что этого невозможно достичь с помощью Flexbox, поскольку каждая строка может иметь только минимальную высоту, необходимую для размещения ее элементов, но можно ли этого достичь с помощью новой CSS Grid? Для ясности, я хочу, чтобы все элементы сетки были одинаковой высоты во всех...
Я немного position: stickyзациклился на этом и подумал, что поделюсь вот этим + flexbox gotcha: Мой липкий div работал нормально, пока я не переключил свое представление на контейнер flexbox, и внезапно div не стал липким, когда он был заключен в родительский элемент flexbox. .flexbox-wrapper {...
Как я могу сказать, что строка макета flexbox занимает оставшееся вертикальное пространство в окне браузера? У меня трехрядный макет flexbox. Первые две строки имеют фиксированную высоту, но третья - динамическая, и я хотел бы, чтобы она увеличивалась до полной высоты браузера. У меня есть еще...
у меня есть <div class="parent"> <div class="child" style="float:right"> Ignore parent? </div> <div> another child </div> </div> У родителя есть .parent { display: flex; } Для своего первого ребенка я хочу просто переместить предмет вправо. И другие мои div,...
Я хочу использовать полноразмерное приложение с помощью flexbox. Я нашел то, что хочу, используя старый модуль макета flexbox ( display: box;и другие вещи) по этой ссылке: CSS3 Flexbox full-height app and overflow Это правильное решение для браузеров, которые поддерживают только старую версию...
Я использовал макет гибкого блока CSS, который выглядит, как показано ниже: Если экран становится меньше, он превращается в это: Проблема в том, что размеры изображений не изменяются, сохраняя пропорции исходного изображения. Можно ли использовать чистый CSS и макет гибкого блока, чтобы разрешить...
Этот вопрос касается браузера с полной поддержкой css3, включая flexbox. У меня есть гибкий контейнер с некоторыми элементами. Все они оправданы для гибкого начала, но я хочу, чтобы последний .end элемент был оправдан для гибкого конца. Есть ли хороший способ сделать это, не изменяя HTML и не...
Мне нужна помощь в устранении проблемы, мне нужно центрировать содержимое внутри столбца в bootstrap4, пожалуйста, найдите мой код ниже <div class="container"> <div class="row justify-content-center"> <div class="col-3"> <div class="nauk-info-connections"> </div>...
Как видите, list-itemsу первого rowесть то же самое height. А вот предметы во втором у rowних разные heights. Я хочу, чтобы у всех предметов была униформа height. Есть ли способ добиться этого без указания фиксированной высоты и только с помощью flexbox ? Вот мой code .list { display: flex;...
Образец: div { display: flex; height: 200px; background: tan; } span { background: red; } <div> <span>This is some text.</span> </div> Запустить фрагмент кодаСкрыть результатыРазвернуть фрагмент У меня два вопроса, пожалуйста: Почему это в основном происходит с span? Каков...
Я хочу сделать divпалку в верхней части экрана без какого-либо влияния на другие элементы, а ее дочерний элемент в центре. .parent { display: flex; justify-content: center; position: absolute; } <div class="parent"> <div class="child">text</div> </div> Запустить фрагмент...
У меня есть гибкий контейнер с двумя гибкими элементами. Я хочу установить верхний край на втором, но только когда он завернут, а не на первой гибкой линии. По возможности я хочу избегать использования медиа-запросов. Я думал, что нижняя граница первого элемента может быть решением. Однако он...
Вчера я получил в школе веб-сайт, который использует оператор Flexbox CSS 3. Я никогда не использовал это раньше. Итак, я немного погуглил и нашел много разных стилей операторов flexbox. Кто-то пишет display: box;, кто-то пользуется display: flexbox;, а кто-то display: flex;. Так в чем же отличия?...