Как сделать 2 колонки на Flexbox

204
23 ноября 2018, 21:00

Как при помощи флекс-технологии построить 2 колонки одинаковой ширины? При этом элементы внутри колонок не должны переносится на следующую строку.

.block__section { 
	display: flex; 
	justify-content: space-between; 
	flex-wrap: nowrap; 
	margin: 0; 
	padding: 0; 
	flex-direction: row; 
} 
 
.block_text__span { 
	background: #29c5e5; 
	color: #29c5e5; 
	padding: 0 8px; 
	margin-right: 6px; 
	height: 10px; 
} 
 
.title_pattern { 
	height: 14px; 
	margin-top: 29px; 
} 
 
.block { 
	flex: 1 0; 
	width: 50%; 
}
<div class="block__section"> 
   <div class="block"> 
      <div class="block_text"> 
         <ul class="block_text__ul"> 
            <li class="block_text__li"><span class="block_text__span">.  
               </span> About WhiteSquare 
            </li> 
         </ul> 
      </div> 
      <img src="img/Title pattern.png" class="title_pattern" alt=""> 
   </div> 
   <div class="block"> 
      <div class="block_text"> 
         <ul class="block_text__ul"> 
            <li class="block_text__li"><span class="block_text__span">.  
               </span> a word from OUR ceo 
            </li> 
         </ul> 
      </div> 
      <img src="img/Title pattern.png" class="title_pattern" alt=""> 
   </div> 
</div>

Answer 1

* { 
  margin: 0; 
  padding: 0; 
} 
 
.items { 
  display: flex; 
  justify-content: space-between; 
  text-align: center; 
  width: 60%; 
  height: 80vh; 
  margin: auto; 
} 
 
.item { 
  width: 50%; 
} 
 
.item:nth-of-type(1) {} 
 
.item:nth-of-type(2) { 
  border-left: 1px solid #000; 
}
<div class="items"> 
  <div class="item"> 
    первая колонка 
  </div> 
  <div class="item"> 
    вторая колонка 
  </div> 
</div>

Answer 2

Пример

.flex-parent { 
  display: flex;   
} 
.flex-child {   
  background: #ccc; 
  text-align: center; 
  padding: 15px; 
  box-sizing: border-box; 
  width: 50%; 
  white-space: nowrap; 
  display: flex;    
  flex-wrap: nowrap; 
} 
.flex-child:nth-of-type(2) { 
  background: #ddd; 
}
<div class="flex-parent"> 
  <div class="flex-child"> 
    <div class="elem">elem</div> 
    <div class="elem">elem</div> 
  </div> 
  <div class="flex-child"> 
    <div class="elem">elem 2</div> 
    <div class="elem">elem 2</div> 
  </div> 
</div>

READ ALSO
Как вставить разрыв страницы (переход на новую строчку) в ячейке HTML таблицы
CSS

Как вставить разрыв страницы (переход на новую строчку) в ячейке HTML таблицы

Делаю вывод html страницы в RubyOnRails проекте и столкнулся с такой проблемойЕсть ячейка таблицы в которую я вывожу строку, например "значение1,...

 209
Клонирование элементов навигации?
javascript

Клонирование элементов навигации?

Помогите, разобраться почему по клику на кнопку Каталог, мне после ссылок bl_catalogProducts__link сыпяться только значения Первого списка из навигации...

 196
Вывод определенных элементов массива
javascript

Вывод определенных элементов массива

Есть одномерный массив a, нужно вывести все элементы массива начиная от K и заканчивая N элементом массива:

 176
infowindow.js:15 Uncaught TypeError: f.get is not a function in react component
javascript

infowindow.js:15 Uncaught TypeError: f.get is not a function in react component

У меня в верхнем компоненте подняты данные c infowindow, marker, map, надо обработать клик, чтобы окошко открывалось и закрывалось, но выскакивает ошибка

 186