Как сделать изгиб элемента высотой его родителя? - PullRequest
Новая
       7

Как сделать изгиб элемента высотой его родителя?

1 голос
/ 12 марта 2019

У меня есть простой макет типа навигации, использующий flex для размещения элементов с различной шириной по горизонтали. Элементы имеют строки между, но разной высоты, потому что содержимое имеет разную высоту

Как я могу сделать элементы высотой родительского элемента, чтобы все разделительные линии доходили до верха родительского элемента.

https://codepen.io/anon/pen/zbEMVd

* {
  font-family: sans-serif;
}

.wrap {
  border: 1px solid grey;
  display: flex;
  padding: 5px;
  justify-content: space-between;
  max-width: 1200px;
}

.item:not(:last-of-type) {
  border-right: 2px solid red;
}

.item-1 {
  width: 150px;
}

.item-2 {
  width: 50px;
}

.item-3 {
  width: 50px;
}

.item-4 {
  width: 50px;
}

.item-5 {
  flex: 1;
}

.item-6 {
  width: 50px;
}
<div class="wrap">
  <div class="item item-1">One</div>
  <div class="item item-2">Two Two Two Two Two </div>
  <div class="item item-3">Three Three Three</div>
  <div class="item item-4">Four</div>
  <div class="item item-5">Five</div>
  <div class="item item-6">Six</div>
</div>

Ответы [ 2 ]

0 голосов
/ 12 марта 2019

Сделать элемент item flexbox обратного столбца (и удалить из него align-self: flex-end), чтобы получить эффект - см. Демонстрацию ниже: 

* {
  font-family: sans-serif;
}

.wrap {
  border: 1px solid grey;
  display: flex;
  padding: 5px;
  justify-content: space-between;
  max-width: 1200px;
}

.item {
  /* align-self: flex-end; */
  display: flex; /* ADDED */
  flex-direction: column-reverse; /* ADDED */
  background: #ddd;
}
.item:not(:last-of-type) {
  border-right: 2px solid red;
}

.item-1 {
  width: 150px;
}

.item-2 {
  width: 50px;
}

.item-3 {
  width: 50px;
}

.item-4 {
  width: 50px;
}

.item-5 {
  flex: 1;
}

.item-6 {
  width: 50px;
}
<div class="wrap">
  <div class="item item-1">One</div>
  <div class="item item-2">Two Two Two Two Two  </div>
  <div class="item item-3">Three Three Three</div>
  <div class="item item-4">Four</div>
  <div class="item item-5">Five</div>
  <div class="item item-6">Six</div>
</div>
0 голосов
/ 12 марта 2019

Удалить align-self из .item и добавить вместо него display:flex; align-items: flex-end;. 

.item{
  display: flex;
  align-items: flex-end;
  /* ... */
}

https://codepen.io/anon/pen/ZPXVra

...