Я не думаю, что в настоящее время возможно сделать именно то, что вы просите, используя только CSS3, при этом все еще учитывая динамический размер списка.
Проблема в том, что вы получаете доступ к контрольным точкам подсчета столбцов в css. Если вы можете найти средний элемент, то вы можете использовать селектор брата, чтобы изменить все последующие элементы на «align: left». Я не мог найти способ сделать это, но это может потребовать дальнейшего расследования. Вот отправная точка: Средний дочерний псевдокласс
Если вы можете получить вычисленное смещение по оси X от родителя (он же left: n) после того, как оно вычислит разрыв столбца, вы можете использоватьСинтаксис атрибута, чтобы определить, какие элементы находятся в правом столбце. Опять же, я не смог найти никакой документации о том, как это сделать.
Я не скажу, что невозможно делать именно то, что вы хотите, но я не оправдаю ваши надежды. Однако, если вы готовы отказаться от использования column-count и принять чередующийся левый> правый> левый> правый порядок вместо левого заполнения> правый порядок заполнения, то это вполне выполнимо.
вот CSS:
.flex-wrapper {
display: flex;
justify-content: center; /* or use align-items: center for a direction: column */
}
ul {
display: flex;
flex-wrap: wrap;
}
li {
width: 50%;
}
li:nth-child(odd) {
text-align: right;
}
Хотя этот метод не достигает желаемого порядка, он создает стиль без необходимости изменять HTML или добавлять JavaScript. Он также обрабатывает динамические размеры списков.
Мне действительно любопытно, если кто-то сможет найти для этого идеальное решение.