Вопрос по css3, flexbox, css – Работает ли модуль flexbox CSS только с прямыми дочерними элементами?

16

Посмотрите на эту страницу дизайн сайта, которым я владею и управляю:

http://www.jungledragon.com/image/9472/barn_owl_close-up.html

Как видите, это касается классического двухколоночного макета. Порядок вещей важен. Например, вы можете увидеть непосредственно рядом с фотографией, что это за вид.

Сейчас я пишу адаптивный дизайн для этого сайта и сталкиваюсь с проблемой. Представьте себе эту страницу в узком окне смартфона. Классическая стратегия заключается в том, чтобы просто «сложить» правый столбец под левым и позволить пользователям осуществлять вертикальную прокрутку. Однако это далеко от идеала с точки зрения упорядочения элементов. Блок 'specie' будет находиться чуть ниже фотографии, пользователям сначала нужно будет прокрутить такие вещи, как комментарии, прежде чем они смогут увидеть связь между фотографией и видом.

Я пытаюсь решить эту проблему, и эта статья, которая объясняет flexbox CSS как возможное решение, звучит очень многообещающе:

http://www.jordanm.co.uk/post/21863299677/building-with-content-choreography

Идея здесь в том, что, используя только CSS, можно изменить визуальный порядок элементов, именно то, что мне нужно. К сожалению, с тех пор я узнал, что статья использует устаревшую спецификацию и что новая спецификация едва поддерживается любым браузером:

http://css-tricks.com/old-flexbox-and-new-flexbox/

Этот вид разрушает это для меня. Тем не менее, я все еще хотел бы задать свой вопрос на концептуальном уровне:

Все демонстрации, которые я видел относительно flexbox, имеют такую простую разметку:

<div id="somecontainer">
  <div id="child1"></div>
  <div id="child2"></div>
</div>

Далее контейнер объявляется как flexbox, направление вертикальное. И, наконец, порядок присваивается каждому дочернему элементу. Это позволяет, например, child2 быть перемещенным выше child1, используя одну инструкцию CSS.

Теперь вот вопрос. Что если фактическая разметка является более сложной в том смысле, что в игре присутствуют дополнительные иерархии? Пример:

<div id="somecontainer">

  <div id="colmain">

    <div id="content1"></div>
    <div id="content2"></div>
    <div id="content3"></div>

  </div>

  <div id="colside">

    <div id="content4"></div>
    <div id="content5"></div>
    <div id="content6"></div>

  </div>

</div>

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

Может ли flexbox и переупорядочение дочерних элементов работать в таком сценарии? Может ли, например, «content5» быть перемещен между «content1» и «content2»?

Независимо от плохой поддержки браузера, я пытаюсь концептуально понять, будет ли это поддерживаться. Причина, по которой я a, sk, заключается в том, что дополнительные иерархии столбцов чрезвычайно распространены в разметке, и было бы совершенно плохо, если бы переупорядочивание flexbox работало только на прямых потомках.

Как я уже сказал, я не думаю, что это будет. robertc
@robertc Давайте пока исключим поддержку браузеров, мне просто любопытно, будет ли это работать / может / должно работать, если браузеры будут поддерживать ее, то есть будет ли она работать в соответствии со спецификацией? Или переупорядочение работает только на прямых потомках? Ferdy
Я думаю, что ответ - нет, но даже если бы это сработало в реальном мире, поддержка браузера «новой» спецификации еще далека. В той далекой нирване, где работают все новые сексуальные CSS-макеты, вам даже тогда, вероятно, будет лучшеМакет сетки если вы хотите вытащить элементы из вложенности. robertc

Ваш Ответ

3   ответа
2

http://dev.w3.org/csswg/css3-grid-layout/ однако на момент написания статьи поддерживает только IE10:http://caniuse.com/css-grid

и шаблон макетаhttp://www.w3.org/TR/2009/WD-css3-layout-20090402/

Не уверен, что либо они разрабатываются, либо у нас будет другая вещь типа flex-box с множеством похожих, но меняющихся синтаксисов

30

изложено довольно четко в спецификации:

Содержимое гибкого контейнера состоит из нуля или болеегибкие предметы: каждый потомок гибкого контейнера становится гибким элементом

В случае, если формулировка в спецификации сбивает вас с толку, это потому, что ваша формулировка немного отличается:

Они дети, но не прямые дети.

A ребенок прям по определению ... внутреннийdivназываютсяпотомки, но не дочерние в том смысле, что они не вложены непосредственно в гибкий контейнер.

Теперь что-нибудь сdisplay: flex или жеdisplay: inline-flex Обозначается гибкий контейнер. Хотя каждый flex-элемент участвует в контексте форматирования flex-контейнера, потомки flex-элемента форматируются независимо и независимо от flex-контейнера, и остаются такими же, как если бы контейнер никогда не сгибался в первую очередь.

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

Спасибо, что полностью отвечаю на мой вопрос. Ferdy
2

BoltClock«sответ это здорово, но я хочу добавить важное примечание:

Это (прямые) дочерние блоки flex-контейнера, которые становятся flex-элементами. Но они не обязательно соответствуют (прямым) дочерним элементам.

Некоторые примеры:

::before а также::after псевдоэлементы flex-контейнера генерируют flex-элементы.Каждый непрерывный фрагмент текста, который непосредственно содержится во флекс-контейнере, оборачивается анонимным флекс-элементом.Если дочерний элемент гибкого контейнера имеетdisplay: contents, он не будет отображен, и его дочерние элементы (внуки гибкого контейнера) будут отображаться как элементы Flex.

Затем, если у вас есть сложная структура внутри гибкого контейнера, и вы хотите, чтобы листья дерева были гибкими элементами внешнего контейнера, вы можете стилизовать все промежуточные элементы с помощьюdisplay: contents.

Однако обратите вниманиеdisplay: contents это недавнее добавление, поэтому оно пока не широко поддерживается.

Я обнаружил, что настольный Safari, похоже, ведет себя по-разному в зависимости от количества текста внутри гибкого контейнера. Так что, если у вас есть проблемы, попробуйте их устранить. Flimm

Похожие вопросы