FLEX — есть селектор дочернего элемента, когда он один в ряду?

Question

[VANY]

Есть ли селектор элемента .flex-child, когда он находится один на оси (т.е. в момент, когда flex-wrap отрабатывает)?

Comments

[Сергей delphinpro]

нет

[Сергей delphinpro]

но возможно решение задачи найдется, если вы озвучите ее подробнее.

[VANY]

Сергей: куда подробнее? Есть .flex-parent, в нем два .flex-child. Если у .flex.parent {flex-flow:flow}, и второй flex-child перескочил на следующую ось (row) благодаря flex-flow:flox, как узнать что он это сделал посредством css? Есть ли какой-то селектор :flow'ed или нечто подобное? Необходимо знать, когда отрабатывает flex-flow.

[Сергей delphinpro]

Иван Украинцев: я сказал, что узнать про перескок нельзя. но в определенных случаях можно выкрутиться. можно средствами css "подсчитать" количество потомков, и задать определенным разные стили. пример - 2 или 4 шт помещаются в ряд или в два. три или пять - уже нет. Можно опереться например на нечетность количества и последнему задать другой стиль.
Я говорил о таких подробностях конкретной задачи.

[VANY]

Сергей: задача проще - есть всего два потомка, и если они располагаются на разных рядах - первый потомок необходимо выровнять по центру

[Сергей delphinpro]

Иван Украинцев: так что ли?
https://jsfiddle.net/4cdffuww/

[VANY]

Сергей: хм, у меня неизвестны до построения DOM'а размеры дочерних элементов, но я посмотрю детальнее grow - может что придумаю!)

[Сергей delphinpro]

Иван Украинцев: размеры я задал для наглядности (потому что блоки пустые). В реальности они могут зависеть от контента. Также размеры можно контролировать свойствами flex-grow, flex-shrink, flex-basis (или объединенное flex), max-width, min-width, width.

[ngreduce]

Иван Украинцев Присоединяюсь к Сергею. Попробуйте задать margin: 0 auto у элемента, который нужно отцентровать.

[VANY]

ngreduce: как центрировать - я знаю. Мне необходимо было центрировать именно в тот момент, когда элемент находится один в row.

[ngreduce]

Иван Украинцев: печально, когда только js, только хардкор :(

[ngreduce]

ngreduce: Единственное что получается - это центровать с отключенным flex-grow https://jsfiddle.net/zxugb0vL/ (можно поиграться с шириной панели с контентом)

[VANY]

ngreduce: надо content-независимо. Играться с шириной - не подходит.

Answer 1

[Артем Зинкин]

Можно в целом один дочерний элемент поймать:

.parent :first-child:last-child {

}

https://jsfiddle.net/hvLmjm0w/2/