Сделайте каждый столбец в flex-direction: column flex-wrap: wrap list не шире, чем нужно

Question

Эта скрипка в основном работает как задумано, за исключением того, что она заполняет всю доступную ширину, когда она может:

https://jsfiddle.net/d16ba2re/2/

CSS:

ul {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 100px;
  padding: 0;
  margin: 0
}

li {
  background: white;
  border: 1px solid #ccc;
  list-style: none;
  padding: 0;
  margin: 0
}

justify-content, похоже, ничего не меняет, независимо от того, что я установил.

Есть ли простой трюк для достижения того, что я здесь ищу, или мне не повезло?

Answer 1

Я, вероятно, начну новый вопрос, но в случае, если это еще один очень простой запрос для вас ... У меня также есть проблемы при переносе в float: правильно.Я ожидаю, что div будет полностью содержать ul, но реальность такова, что он истекает из него.jsfiddle.net/d16ba2re/3

Установите правильную ширину для вашего div.Я пробовал 295px, и, кажется, все в порядке.

Answer 2

Полагаю, вы ищете align-content свойство со значением на ваш выбор, здесь с flex-start:

ul {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: flex-start;
  height: 100px;
  padding: 0;
  margin: 0
}

li {
  background: white;
  border: 1px solid #ccc;
  list-style: none;
  padding: 0;
  margin: 0;
}

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
  <li>Seven</li>
  <li>Eight</li>
  <li>Nine</li>
  <li>Ten</li>
  <li>Eleven</li>
  <li>Twelve</li>
  <li>Thirteen</li>
  <li>Fourteen</li>
  <li>Fifteen</li>
  <li>Sixteen</li>
  <li>Seventeen</li>
  <li>Eighteen</li>
  <li>Nineteen</li>
  <li>Twenty</li>
  <li>Twenty one</li>
  <li>Twenty two</li>
  <li>Twenty three</li>
</ul>