Как сверстать таблицуна flexbox

136
04 февраля 2021, 07:30

Вот макет

Как сверстать такую таблицу на flexbox ?

Answer 1

Ни делал адаптивно ..но похоже вроде бы

.wrapper { 
  border: 1px solid; 
  width: 800px; 
  margin: auto; 
  padding: 0 4px; 
} 
 
.header { 
  display: flex; 
} 
 
.header p, 
.header div { 
  width: 140px; 
} 
 
.header p:not(:first-child), 
.header div { 
  text-align: center; 
} 
 
.header div, 
.header div p { 
  width: 240px; 
} 
 
.header div p:not(:first-child) { 
  display: flex; 
  justify-content: center; 
} 
 
.header div p span { 
  width: 50px; 
  text-align: center; 
} 
 
.header div p span:nth-of-type(2) { 
  margin: 0 20px; 
} 
 
.row { 
  display: flex; 
} 
 
.row p { 
  width: 140px; 
  text-align: center; 
  border: 1px solid #ccc; 
} 
 
.row p:first-child { 
  text-align: left; 
} 
 
.row p:nth-of-type(3) { 
  width: 240px; 
  text-align: center; 
} 
 
.row p:nth-of-type(3) span:nth-of-type(2) { 
  margin: 0 60px; 
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css"> 
 
<div class="wrapper"> 
  <div class="header"> 
    <p>Включено</p> 
    <p>Работа подоговору</p> 
    <div> 
      <p>Абонетское обслуживание</p> 
      <p> 
        <span>Вар 1</span> 
        <span>Вар 2</span> 
        <span>Вар 3</span> 
      </p> 
    </div> 
    <p>Покопийное обслуживание</p> 
    <p>Разное обслуживание</p> 
  </div> 
  <div class="row"> 
    <p> 
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quam? 
    </p> 
    <p></p> 
    <p> 
      <span> 
        <i class="fas fa-angle-down"></i> 
      </span> 
      <span> 
        <i class="fas fa-angle-down"></i> 
      </span> 
      <span> 
        <i class="fas fa-angle-down"></i> 
      </span> 
    </p> 
    <p> 
      <i class="fas fa-angle-down"></i> 
    </p> 
    <p></p> 
  </div> 
</div>

READ ALSO
HTML5 drag and drop баг в chrome

HTML5 drag and drop баг в chrome

Я обнаружил странное поведение перетаскиваемой картинки в Chrome, тогда как в FIREFOX все работает отличноДело в том что при использовании метода...

115
Добавление API в C#

Добавление API в C#

как добавить API в приложение с Windows Forms ?

120
Как ограничить угол наклона объекта в Unity?

Как ограничить угол наклона объекта в Unity?

Допустим у меня есть поле, его можно будет наклонять, как мне ограничить угол наклона? Вот что я покамисть начудилИ да, вообще эту всю шнягу...

166