У 2 элементов одна линия с flexbox

Если я оправдываю серию элементов с помощью flexbox, можно ли сделать так, чтобы 2 элемента разделяли линию?

Например, возьмите этот пример:

.outer {
  display: flex;
  flex-direction: column;
  margin-left: auto;
  margin-right: auto;
  width: 50px;
}
.outer .inner {
  width: 50px;
  height: 50px;
  background-color: blue;
  margin-bottom: 20px;
  font-size: 24px;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class = "outer">
  <div class = "inner">1</div>
  <div class = "inner">2</div>
  <div class = "inner">3</div>
  <div class = "inner">4</div>
  <div class = "inner">5</div>
  <div class = "inner">6</div>
  <div class = "inner">7</div>
</div>

Элементы расположены в прямом столбце. Можно ли выбрать определенные элементы для совместного использования строки следующим образом:

У 2 элементов одна линия с flexbox

Вы пробовали использовать другой контейнер flexbox для двух элементов в строке?

— 31.05.2018 03:32

Я не могу редактировать html, я могу использовать только css.

— 31.05.2018 03:34

Вам нужно использовать flexbox? Интересно, упростит ли вам использование макета сетки CSS.

— 31.05.2018 03:37

Я только что проверил статистику, и, к сожалению, это не сработает примерно для 15% трафика. Если нет способа, я просто буду использовать абсолютное позиционирование и поля, но я бы предпочел решение с более приятным потоком

— 31.05.2018 03:45

Можете ли вы использовать JQuery?

— 31.05.2018 03:51

да, я могу добавить jquery, я просто не могу изменить html, потому что он сломает кое-что за пределами моего контроля

— 31.05.2018 03:52

css flexbox

31.05.2018 03:30

Приемы 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 сценарий полностью изменился.

6 689

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

Ответы 2

Вы можете попробовать что-то вроде этого:

.outer {
  display: flex;
  margin:auto;
  flex-wrap:wrap;
  width: 50px;
}
.outer .inner {
  width: 50px;
  height: 50px;
  background-color: blue;
  margin-bottom: 20px;
  font-size: 24px;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.outer .inner:nth-child(3),.outer .inner:nth-child(4) {
  width:25px;
  position:relative;
}
.outer .inner:nth-child(3):before,.outer .inner:nth-child(4):before {
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:-12px;
  right:-12px;
  background:blue;
  z-index:-1;
}

.outer .inner:nth-child(3) {
  transform:translateX(-20px)
}
.outer .inner:nth-child(4) {
  transform:translateX(20px)
}

<div class = "outer">
  <div class = "inner">1</div>
  <div class = "inner">2</div>
  <div class = "inner">3</div>
  <div class = "inner">4</div>
  <div class = "inner">5</div>
  <div class = "inner">6</div>
  <div class = "inner">7</div>
</div>

31.05.2018 03:56

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

Вы можете попробовать это.

Я установил .outer на flex-flow:row wrap; и установил его width.

а затем установите margin из .outer .inner:nth-child(3),.outer .inner:nth-child(4)

Заставив дочерний элемент 3 и 4 установить свои margin и width, которые по-прежнему не будут превышать ширину .outer, так что они все еще будут встроены друг в друга, а другой дочерний элемент будет занимать всю строку, потому что их margin и width равны ширине .outer

.outer {
  display: flex;
  flex-flow: row wrap;
  margin-left: auto;
  margin-right: auto;
  width: 120px;
  justify-content: center;
  align-items: center;
}
.outer .inner {
  width: 50px;
  height: 50px;
  margin-left: 35px;
  margin-right: 35px;
  margin-bottom: 20px;
  background-color: blue;
  font-size: 24px;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.outer .inner:nth-child(3),
.outer .inner:nth-child(4){
  margin-left: 5px;
  margin-right: 5px;
}

<div class = "outer">
  <div class = "inner">1</div>
  <div class = "inner">2</div>
  <div class = "inner">3</div>
  <div class = "inner">4</div>
  <div class = "inner">5</div>
  <div class = "inner">6</div>
  <div class = "inner">7</div>
</div>

Это очень умно, мне это нравится. Принуждение элемента к переносу с полем - это не то, что мне пришло в голову.

— 31.05.2018 04:06

31.05.2018 03:59