Ребенок-элемент flexbox ведет себя по-разному [дубликат]

Вы можете попробовать это.

    >>> import ast
    >>> data = "{'user': 'bob', 'age': 10, 'grades': ['A', 'F', 'C']}"
    >>> ast.literal_eval(data)

    O/P: {'age': 10, 'grades': ['A', 'F', 'C'], 'user': 'bob'}

    >>> user = ast.literal_eval(data)

    >>> user['age']
    O/P: 10

    >>> user['grades']
    O/P: ['A', 'F', 'C']

    >>> user['user']
    O/P: 'bob'
452
задан Michael_B 24 September 2016 в 22:51
поделиться

5 ответов

800
ответ дан Michael_B 17 August 2018 в 18:11
поделиться

Это было задано в списке www-style, а Tab Atkins (редактор спецификаций) предоставил ответ, объясняющий, почему . Я подробно расскажу об этом немного.

Чтобы начать, предположим, что наш контейнер flex является однострочным (flex-wrap: nowrap). В этом случае существует четкая разность выравнивания между главной осью и поперечной осью - на главной оси располагаются несколько элементов, но только одна позиция укладывается в поперечную ось. Таким образом, имеет смысл иметь настраиваемое значение «align-self» в поперечной оси (так как каждый элемент выравнивается отдельно, сам по себе), тогда как он не имеет смысла на главной оси (поскольку там, элементы выравниваются вместе).

Для многострочного flexbox та же логика применяется к каждой «гибкой линии». В данной строке элементы выровнены по отдельности на поперечной оси (так как в каждой поперечной оси имеется только один элемент), а коллективно - на главной оси.


Вот еще один способ выражая его: так, все свойств *-self и *-content связаны с тем, как распределять лишнее пространство вокруг вещей. Но ключевое различие заключается в том, что версии *-self предназначены для случаев, когда имеется только одна вещь в этой оси , а версии *-content - это когда есть потенциально много вещей в этом ось . Сценарии «одна вещь» или «много вещей» - это разные типы проблем, поэтому они имеют разные типы доступных параметров - например, значения space-around / space-between имеют смысл для *-content, но не для *-self.

SO: В основной оси flexbox есть много вещей, чтобы распределить пространство вокруг. Таким образом, свойство *-content имеет смысл, но не свойство *-self.

Напротив, на поперечной оси мы имеем свойство *-self и *-content. Один определяет, как мы будем распределять пространство вокруг гибких линий many (align-content), тогда как другое (align-self) определяет, как распределить пространство вокруг отдельных элементов гибкости в поперечной оси в пределах данной гибкой линии.

(здесь я игнорирую свойства *-items, так как они просто устанавливают значения по умолчанию для *-self.)

15
ответ дан dholbert 17 August 2018 в 18:11
поделиться
  • 1
    Я понимаю, как justify-self может быть проблемой на оси с несколькими элементами в отличие от одного элемента. Однако я действительно надеюсь, что они будут изучать его дальше, в ситуации с несколькими пунктами, как justify-self будет вести себя, потому что есть ситуации, когда это может быть действительно полезно. Например ( stackoverflow.com/questions/32378953/… ). – Mark 15 September 2015 в 09:36
  • 2
    Приятно найти в этом списке рассылки. Попытка обернуть мне голову, так как я все еще вижу хорошие варианты использования для justify-self. – Michael_B 15 September 2015 в 10:26
  • 3
    Я добавил немного разъяснения, объясняя, как *-self относится к случаям, когда мы имеем только one вещь для выравнивания, тогда как *-content относится к случаям, когда мы имеем many вещи для выравнивать. Разве это немного лучше? – dholbert 15 September 2015 в 14:11
  • 4
    Да, это более ясно. Я ценю объяснение. Но, похоже, все сводится к простому предпочтению авторов спекуляций, а не к конкретной необходимости, основанной на логике. Из списка рассылки , на который вы ссылаетесь : Свойства * -self работают только в том случае, если ребенок одинок по этой оси. Почему? Кажется, что это не нужно. Это произвольное решение. Предпочтение. Фактически, поля auto, также входящие в спецификацию, позволяют выравнивать * -self с несколькими элементами в строке. Нет ясной причины, по которой свойства ключевых слов также не могут быть. – Michael_B 22 November 2015 в 17:30
  • 5
    Это непросто понять в первый раз. – xianshenglu 18 June 2018 в 07:05

Существует justify-self, но в Chrome Canary, а не в стабильной версии Chrome. Существует даже justify-items:

Но насколько я могу сказать, эти свойства также не работают. Вероятно, Google заранее сохранил его для будущих выпусков CSS. Можно только надеяться, что они скоро добавят свойства.

0
ответ дан Green 17 August 2018 в 18:11
поделиться
  • 1
    Это не в спецификации flexbox . Это официальная ссылка. Кроме того, то, что вы видите, может быть внедрением Chrome модуля CSS Box Alignment Module , который является другой технологией W3C. (См. Последнюю часть вопроса.) – Michael_B 16 December 2016 в 18:58

Я не знаю ответа, но мне нравится вносить свой вклад в это дело за то, что он стоит. Было бы здорово, если бы они выпустили justify-self для flexbox, чтобы сделать его действительно гибким.

В моем убеждении, когда на оси есть несколько элементов, наиболее логичным способом поведения justify-self является согласование с ближайшими соседями (или ребрами), как показано ниже.

Я действительно надеюсь, что W3C будет смотреть это и, по крайней мере, подумает об этом. =)

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

Легкость сделать удивительные макеты бесконечными, взгляните на этот «сложный» пример.

85
ответ дан Mark 17 August 2018 в 18:11
поделиться
  • 1
    @Mark это потрясающе! Спасибо, что потратили время на это. Надеюсь, вы не против, но я представил его здесь: discourse.wicg.io/t/flexbox-justify-self-property/1146 – Zaqx 15 October 2015 в 02:52
  • 2
    @Zaqx уверен, чем больше экспозиции, тем лучше. Серьезно надеюсь, что они найдут способ сделать эту реальность, хотели бы, чтобы мои руки были грязными. – Mark 18 October 2015 в 19:52
  • 3
    Привет Марк, @Zaqx, я опубликовал ответ, который может охватывать некоторые из вариантов использования, упомянутых в этом ответе. Я обнаружил, что многое еще можно сделать на главной оси без необходимости justify-self и justify-items. – Michael_B 23 November 2015 в 06:30
  • 4
    @Michael_B Рад, что вы больше узнаете о flexbox и оцените, что уделили время форматированию заметок в ответ. Маржа: авто действительно круто (хотя вы обнаружите, что браузеры, реализованные в версиях Flexbox 2009 и 2012 годов, не имеют эквивалентной функции, которая резко снижает возможность использования ее на производственном сайте). Однако даже с браузерами, поддерживающими margin: auto, основной случай использования элемента, который центрирован относительно его контейнера, в то время как пространство существует, по-прежнему невозможно без свойства justify-self или аналогичного. – Zaqx 23 November 2015 в 10:34
  • 5
    @Zaqx, спасибо за отзыв. И да, я согласен с вами, поля auto не являются полной заменой justify-self. Я был осторожен, чтобы записать свой предыдущий комментарий, указав, что поля auto будут охватывать некоторые из вариантов использования . Как вы отметили, он не может центрировать предмет на месте, когда смежные предметы имеют разные размеры. Однако он предоставляет больше возможностей для выравнивания элементов гибкости. Когда я впервые начал изучать flexbox, я думал, что justify-content и невидимые элементы спейсеров были единственным способом. – Michael_B 24 November 2015 в 15:40

Есть justify-items .

Я думаю, что это новая функция. Совместимость браузера несколько отсутствует.

-2
ответ дан Stephen Kennedy 17 August 2018 в 18:11
поделиться