Блог

Главная - Вопросы по программированию - Заполните высоту родительского элемента гибким

Заполните высоту родительского элемента гибким

#html #css #flexbox #height

Вопрос:

Я работаю над адаптивным дизайном, в котором у меня есть ul некоторые li элементы внутри, с различной длиной текста. Я хочу li , чтобы элементы заполняли высоту ul , но у меня возникли некоторые проблемы с этим. li Элементы имеют разную высоту, когда содержимое одного из них становится слишком длинным. Пример можно найти ниже:

 ul {
  display: flex; 
  align-items: center; 
  width: 650px; 
  background: red;
}

li {
  background: orange;
  border-right: 1px solid #CCC;
  list-style: none;
  padding: 10px;
  flex: 1;
  height: 100%;
} 
 <ul>
  <li>Longer text here 1-2-3</li>
  <li>About</li>
  <li>Payment</li>
  <li>Payment step 2</li>
  <li>Receipt</li>
</ul>

Как сделать li элементы одинаковой высоты, независимо от их содержимого?

Комментарии:

1. Я не уверен, где в своем посте я сказал, что @s.kuznetsov?

Ответ №1:

Заменить align-items: center на align-items: stretch in ul . И уберите height: 100% внутрь li .

 ul {
  display: flex; 
  align-items: stretch; 
  width: 650px; 
  background: red;
}

li {
  background: orange;
  border-right: 1px solid #CCC;
  list-style: none;
  padding: 10px;
  flex: 1;
} 
 <ul>
  <li>Longer text here 1-2-3</li>
  <li>About</li>
  <li>Payment</li>
  <li>Payment step 2</li>
  <li>Receipt</li>
</ul>

Как следует из названий элементов, это подразумевает меню со ссылками?! Я вставляю a бирку в каждую li бирку.

Наследование li правила flex от родителя путем добавления display: inherit . И добавьте этот css, который центрирует ваши проколы вертикально:

 ul li a {  
  margin: auto 0 auto 0;
}
 
 ul {
  display: flex; 
  align-items: stretch; 
  width: 650px; 
  background: red;
}

li {
  display: inherit; 
  background: orange;
  border-right: 1px solid #CCC;
  list-style: none;
  padding: 10px;
  flex: 1;
}

ul li a {  
  margin: auto 0 auto 0;
} 
 <ul>
  <li><a href="">Longer text here 1-2-3</a></li>
  <li><a href="">About</a></li>
  <li><a href="">Payment</a></li>
  <li><a href="">Payment step 2</a></li>
  <li><a href="">Receipt</a></li>
</ul>

Комментарии:

1. Добавить особо нечего — это полностью решило мою проблему, хотя мне, конечно, пришлось добавить display: flex; align-items: center к li элементам, чтобы содержимое было сосредоточено в них. Спасибо!

2. @Loyalar, если вы центрируете li , он будет выглядеть неравномерно по отношению к элементам, охватывающим более одной линии.

3. Это определенно верно, но в моем случае это выглядит лучше, но я понимаю, что это будет не во всех ситуациях 🙂

4. @s.кузнецов Да, это именно то, что мне было нужно.

5. @Loyalar, я сделал второй фрагмент.

Метки: