Вертикальные линии между блоков сверстанных через display: flex

Question

Как сделать вертикальные линии только между блоками (4 блока в ряд - 3 линии между ними)? Код:

.main_page_contact {
    margin: 20px auto;
    width: 1136px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.page_contact_item {
    width: 252px;
    margin: 30px 0;
}

<div class="main_page_contact">
	<div class="page_contact_item">
		<div class="otdel_dolzhnost">Приемная</div>
	</div>
  	<div class="page_contact_item">
		<div class="otdel_dolzhnost">Директор</div>
	</div>
	<div class="page_contact_item">
		<div class="otdel_dolzhnost">Главный инженер</div>
	</div>
	<div class="page_contact_item">
		<div class="otdel_dolzhnost">Зам. директора</div>
	</div>
	<div class="page_contact_item">
		<div class="otdel_dolzhnost">Зам. директора</div>
	</div>
	<div class="page_contact_item">
		<div class="otdel_dolzhnost">Начальник производства</div>
	</div>
	<div class="page_contact_item">
		<div class="otdel_dolzhnost">Бухгалтерия</div>
	</div>
	<div class="page_contact_item">
		<div class="otdel_dolzhnost">Технический отдел</div>
	</div>
	<div class="page_contact_item">
		<div class="otdel_dolzhnost">Отдел маркетинга</div>
	</div>
  	<div class="page_contact_item">
		<div class="otdel_dolzhnost">Отдел сбыта</div>
	</div>						
	<div class="page_contact_item">
		<div class="otdel_dolzhnost">Отдел снабжения</div>>						
	</div>
	<div class="page_contact_item">
		<div class="otdel_dolzhnost">Отдел кадров</div>
    </div>						
</div>

Answer 1

Пожалуйста, как вариант:

.main_page_contact {
  margin: 20px auto;
  width: 1136px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.page_contact_item {
  width: 252px;
  padding: 30px 0;
}

.page_contact_item:nth-child(1),
.page_contact_item:nth-child(2),
.page_contact_item:nth-child(3),
.page_contact_item:nth-child(5),
.page_contact_item:nth-child(6),
.page_contact_item:nth-child(7),
.page_contact_item:nth-child(9),
.page_contact_item:nth-child(10),
.page_contact_item:nth-child(11) {
  border-right: 1px solid black;
}

<div class="main_page_contact">
  <div class="page_contact_item">
    <div class="otdel_dolzhnost">Приемная</div>
  </div>
  <div class="page_contact_item">
    <div class="otdel_dolzhnost">Директор</div>
  </div>
  <div class="page_contact_item">
    <div class="otdel_dolzhnost">Главный инженер</div>
  </div>
  <div class="page_contact_item">
    <div class="otdel_dolzhnost">Зам. директора</div>
  </div>
  <div class="page_contact_item">
    <div class="otdel_dolzhnost">Зам. директора</div>
  </div>
  <div class="page_contact_item">
    <div class="otdel_dolzhnost">Начальник производства</div>
  </div>
  <div class="page_contact_item">
    <div class="otdel_dolzhnost">Бухгалтерия</div>
  </div>
  <div class="page_contact_item">
    <div class="otdel_dolzhnost">Технический отдел</div>
  </div>
  <div class="page_contact_item">
    <div class="otdel_dolzhnost">Отдел маркетинга</div>
  </div>
  <div class="page_contact_item">
    <div class="otdel_dolzhnost">Отдел сбыта</div>
  </div>
  <div class="page_contact_item">
    <div class="otdel_dolzhnost">Отдел снабжения</div>
  </div>
  <div class="page_contact_item">
    <div class="otdel_dolzhnost">Отдел кадров</div>
  </div>
</div>

Ещё один вариант:

.main_page_contact {
  position: relative;
  margin: 20px auto;
  width: 1136px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.page_contact_item {
  width: 252px;
  padding: 30px 0;
}

.page_contact_item {
  border-right: 1px solid black;
}

.main_page_contact:before {
  content: "";
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: white;
}

<div class="main_page_contact">
  <div class="page_contact_item">
    <div class="otdel_dolzhnost">Приемная</div>
  </div>
  <div class="page_contact_item">
    <div class="otdel_dolzhnost">Директор</div>
  </div>
  <div class="page_contact_item">
    <div class="otdel_dolzhnost">Главный инженер</div>
  </div>
  <div class="page_contact_item">
    <div class="otdel_dolzhnost">Зам. директора</div>
  </div>
  <div class="page_contact_item">
    <div class="otdel_dolzhnost">Зам. директора</div>
  </div>
  <div class="page_contact_item">
    <div class="otdel_dolzhnost">Начальник производства</div>
  </div>
  <div class="page_contact_item">
    <div class="otdel_dolzhnost">Бухгалтерия</div>
  </div>
  <div class="page_contact_item">
    <div class="otdel_dolzhnost">Технический отдел</div>
  </div>
  <div class="page_contact_item">
    <div class="otdel_dolzhnost">Отдел маркетинга</div>
  </div>
  <div class="page_contact_item">
    <div class="otdel_dolzhnost">Отдел сбыта</div>
  </div>
  <div class="page_contact_item">
    <div class="otdel_dolzhnost">Отдел снабжения</div>
  </div>
  <div class="page_contact_item">
    <div class="otdel_dolzhnost">Отдел кадров</div>
  </div>
</div>

БЛОГ НА HUSL

Вертикальные линии между блоков сверстанных через display: flex

Ответы (1 шт):