Ячейка 3 x 3 с большой центральной компоновкой и flexbox нужны простые идеи реализации

С CSS Grid довольно легко реализовать что-то вроде этого Ячейка 3 x 3 с большим центром и сеткой css

.container {
  display: grid;
  grid-template-columns: 60px 1fr 60px;
  grid-template-rows: 60px 1fr 60px;
}

Есть ли простой способ реализовать это с помощью flexbox?

простая реализация flexbox?

почему флексбокс, а не сетка?

— 07.05.2019 16:27

Не без определения высоты контейнера.

— 07.05.2019 16:28

Я предпочитаю сетку, но все еще не могу ее использовать из-за IE 11. Просто хотел посмотреть, может ли flexbox быть таким же простым.

— 08.05.2019 01:25

css flexbox

07.05.2019 16:22

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

CSS:

.container {
  width: 400px;
}

.item {
 background-color: white;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  flex: 0 12%;
  height: 30px;   /* (100-32*3)/2 */
}
.item:nth-child(2n) {
  background-color: gray;
}
.item:nth-child(2) {
  height: 50px;
  flex: 1 70%;
}
.item:nth-child(4) {
  height: 300px;
  flex: 0 12%;
}
.item:nth-child(6) {
  height: 300px;
  flex: 0 12%;
}
.item:nth-child(5) {
  flex: 1 70%;
}
.item:nth-child(8) {
  height: 50px;
  flex: 1 70%;
}

07.05.2019 16:47

Другие вопросы по теме

Как установить свойство переполнения div внутри элемента display:flex

Как сохранить гибкий контейнер на одной странице без прокрутки

Как правильно выровнять кнопки с помощью CSS flexbox

Как расположить изображение так, чтобы оно было слева от рекламного места и все же центрировано с помощью flexbox

Как сделать Flex:1 для мобильных устройств адаптивным?

Css flex проблема с высотой div - почему огромное пространство?

Flexbox позиционирует все так же. Есть ли способ заставить его действовать по-другому?

Как использовать FlexBox для создания обернутых элементов div с процентной высотой

Использование Flex Box для упорядочивания материала в блоке HTML CSS

Row-Flexbox с вертикальной полосой прокрутки: обрезан цвет фона

Ячейка 3 x 3 с большой центральной компоновкой и flexbox нужны простые идеи реализации

Ответы 1

Другие вопросы по теме

Похожие вопросы