Публикации по теме 'flexbox'
CSS Flex: что должен знать каждый разработчик
CSS Flex: что должен знать каждый разработчик Flexbox, также известный как модуль гибкой компоновки блоков, помогает эффективно проектировать и создавать адаптивные веб-страницы без использования многих свойств позиционирования и плавающих элементов. По умолчанию во флекс-контейнере есть только одна флекс-линия. Элементы Flex можно укладывать только в вертикальные столбцы или горизонтальные ряды.
Основы и терминология
Во-первых, давайте ознакомимся с ключевыми терминами, обычно..
Чистое приложение - гибкая компоновка коробки
ВЕБ-РАЗРАБОТКА
Чистое приложение - гибкая компоновка коробки
Проще говоря, Святой Грааль - это макет веб-страницы с несколькими столбцами одинаковой высоты, заданными с помощью таблиц стилей.
Около 4 лет назад у меня возникла идея создать учебное пособие о том, как создавать чистые, легкие и чрезвычайно быстрые веб-приложения без каких-либо фреймворков быстрого питания, что приводит нас к сохранению окружающей среды за счет снижения потребления энергии веб-серверами и компьютеры и..
Стилизация компонентов React с помощью Flexbox
В предыдущем посте мы обсуждали создание и рендеринг компонентов React . Теперь сосредоточимся на стилизации компонентов.
Вот что мы написали до сих пор:
Создание стиля
В отличие от веб-приложений, мы не будем использовать отдельный файл для стилей (CSS). Этот файл будет содержать наши элементы стиля и будет написан на JavaScript. Давайте сначала импортируем ‘ StyleSheet ’ , который очень похож на таблицы стилей CSS.
Теперь мы создадим таблицу стилей с помощью ‘..
Манипуляция домом с 3 примерами
Когда вы начинаете изучать javascript, я считаю, что первое, что вы услышите, - это манипуляции с DOM. Если вы не используете только консоль, вам потребуются некоторые знания о том, как использовать javascript в Dom.
Я не хочу слишком сосредотачиваться на теории, поскольку я узнаю больше, делая и создавая вещи, но давайте определим DOM и то, что значит «манипулировать ею».
DOM обозначает объектную модель документа и работает как дерево, и в этом дереве есть все элементы страницы...
Вопросы по теме 'flexbox'
Вертикальное центрирование содержимого внутри гибкого блока, заполняющего пространство
Я пытаюсь центрировать содержимое по вертикали в двух гибких полях в макете столбца.
Я создал упрощенный Fiddle для демонстрации.
HTML:
<div id='container'>
<div id= "top">
some content!
</div>...
4386 просмотров
schedule
14.12.2023
Как заставить `page-break-inside: избежать` хорошо работать с `flex-wrap: wrap`
Я пытаюсь заставить page-break-inside: avoid работать в форме, использующей многострочный макет flexbox (с flex-wrap: wrap ). Цель состоит в том, чтобы просто не нарушать формы вопросов при печати.
Это хорошо работает с однострочным flexbox или...
11654 просмотров
schedule
08.11.2023
Вложенные флексбоксы не оборачиваются в хром или IE
У меня есть несколько вложенных флексбоксов, которые я хочу использовать для адаптивного веб-сайта, и они правильно работают в Firefox, но не в Chrome или IE. Ссылки должны иметь возможность переноситься так, чтобы они располагались друг над другом,...
1271 просмотров
schedule
11.06.2024
Проблемы Flexbox с iOS 6
Я решил использовать flexbox в своем проекте, но столкнулся с проблемой. Новый синтаксис (на основе http://css-tricks.com/snippets/css/a-guide-to-flexbox/ )
display: flex;
justify-content: center;
align-items: center;
и т. д., кажется,...
2363 просмотров
schedule
17.02.2024
CSS flexbox вертикально/горизонтально центрирует изображение БЕЗ явного определения родительской высоты
Используя только родительский div и дочерний img элементы, как показано ниже, как мне центрировать по вертикали и по горизонтали элемент img , в то время как явно не определять height родителя div ?
<div...
126915 просмотров
schedule
12.05.2024
Контейнер Html flexbox не расширяется по обернутым дочерним элементам
Мне нужно иметь макет, который чем-то похож на начальный экран Windows Metro с плитками. Для этого я пытаюсь использовать макет flexbox. Но столкнулись с проблемой, что родительский flex-контейнер не оборачивает своих дочерних элементов, если они...
956 просмотров
schedule
05.10.2022
Как создать гибкий родитель, чтобы обернуть все дочерние элементы
Я работаю над макетом сетки, используя стиль css flex, и мне нужно полное решение css, если это возможно, у меня есть средства, чтобы исправить это с помощью javascript.
Когда строка превышает ширину области просмотра, она отображает полосу...
2698 просмотров
schedule
25.03.2024
Как предотвратить расширение изображения за пределы контейнера?
У меня есть изображение с высотой больше, чем у его контейнера. Изображение установлено на максимальную высоту: 100% и максимальную ширину: 100%, но оно продолжает расти за пределы содержащего его элемента (по высоте - на удивление, не по ширине)...
13319 просмотров
schedule
02.03.2024
CSS flex: последний и первый элемент в селекторе строки
У меня проблема с выбором последнего элемента первой строки и первого элемента последней строки контейнера flex.
Мой гибкий контейнер flex-wrap: wrap; , а все мои элементы flex: auto; , и они имеют разные размеры, и с помощью flex auto я позволяю...
5701 просмотров
schedule
27.05.2024
Макет материала angularjs, Flex и Offset
1) Я пытаюсь растянуть дочерние элементы div до 60% и выровнять их по центру, но это не работает. Я использую flex, чтобы растянуть размер div до 60%. См. пример http://plnkr.co/edit/eaLjJDbjL1KnOI4jLYyO?p=preview .
<div layout="column"...
34588 просмотров
schedule
26.12.2023
Отзывчивые разделы Flexbox
Я хочу, чтобы все внутренние элементы div, содержащие текст и цвет фона, имели ту же высоту, что и внешний элемент div (col).
Есть ли способ сделать это без jQuery?
.row {
display: -ms-flexbox;
display: -webkit-flex;...
2100 просмотров
schedule
19.10.2022
Сделать таблицу 100% с фиксированным заголовком с угловой умной таблицей
http://plnkr.co/edit/GIeXoF?p=preview
Как я могу сделать эту таблицу высотой 100%, но заголовок должен оставаться фиксированным?
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link data-require="[email protected]"...
10688 просмотров
schedule
23.10.2023
Изменение интерпретации максимальной высоты Flexbox в Chrome
У меня есть код, который в настоящее время правильно отображается в Chrome Stable. Я получил сообщения о неправильной работе кода в бета-версии и для разработчиков, и я могу воспроизвести проблему на Canary. Я нашел эту социальную рекламу , которая...
2331 просмотров
schedule
07.08.2022
замена значения css display:none на «display:flex с использованием js
Я пытаюсь заменить значение css «display: none», определенное в div, на «display: flex», используя свойство js .css(). При этом safari на Ipad игнорирует инструкцию js (я использовал префиксы для кросс-браузерной совместимости + попробовал css!...
830 просмотров
schedule
19.12.2023
Вложенные столбцы Flexbox
Я пытаюсь вложить некоторые столбцы flexbox внутрь flexbox. У меня есть этот HTML:
<div class="container">
<div class="row flex height">
<div class="col-md-6 red">
</div>
<div class="col-md-6 orange">...
1958 просмотров
schedule
24.04.2024
вложенная оптимизация flexbox
Я только изучаю flexbox и пытаюсь понять, как он работает. Мне нужно создать панель инструментов с шириной и высотой области просмотра (без полосы прокрутки), заголовком фиксированной высоты, нижним колонтитулом фиксированной высоты и автоматически...
187 просмотров
schedule
11.07.2022
Добавление точек маркера, равномерно распределенных между элементами flexbox (но только между элементами, а не в начале или конце обернутых строк)
Я хочу добавить маркеры между меню навигации flexbox, но чтобы они отображались только между flex-элементами в одной строке. Ни в начале, ни в конце строки, и вообще, если гибкий элемент находится в строке сам по себе.
Я использовал это ( стиль...
1274 просмотров
schedule
29.06.2022
Как я могу получить переполнение: прокрутите внутри гибкого блока
Я построил этот макет:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<style type="text/css">
html, body{
margin:0;
padding:0;
height:100%;
}
.flex{
display:flex;...
35474 просмотров
schedule
04.05.2024
Как я могу включить все дочерние div в родительский div?
Почему мой родительский div не упаковывает содержимое или дочерние div?
Мне нужны все flex-элементы (дочерние элементы) внутри div flex-container.
Вот мой CodePen .
body {
background:#ddd;
}
.flex-containerHome {...
595 просмотров
schedule
23.10.2023
Гибкая компоновка в IE9
Я хочу построить макет со столбцами, которые должны помещаться в один div. Проблема в том, что в Internet Explorer 9 они не отображаются должным образом. Для chrome/firefox я использовал display: flex; , а затем установил width: n% , так что все...
475 просмотров
schedule
13.06.2024
