Вы можете попробовать это.
>>> 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'
Это было задано в списке 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
.)
justify-self
может быть проблемой на оси с несколькими элементами в отличие от одного элемента. Однако я действительно надеюсь, что они будут изучать его дальше, в ситуации с несколькими пунктами, как justify-self
будет вести себя, потому что есть ситуации, когда это может быть действительно полезно. Например ( stackoverflow.com/questions/32378953/… ).
– Mark
15 September 2015 в 09:36
justify-self
.
– Michael_B
15 September 2015 в 10:26
*-self
относится к случаям, когда мы имеем только one i> вещь для выравнивания, тогда как *-content
относится к случаям, когда мы имеем many i> вещи для выравнивать. Разве это немного лучше?
– dholbert
15 September 2015 в 14:11
auto
, также входящие в спецификацию, позволяют выравнивать * -self с несколькими элементами в строке. Нет ясной причины, по которой свойства ключевых слов также не могут быть.
– Michael_B
22 November 2015 в 17:30
Существует justify-self
, но в Chrome Canary, а не в стабильной версии Chrome. Существует даже justify-items
:
Но насколько я могу сказать, эти свойства также не работают. Вероятно, Google заранее сохранил его для будущих выпусков CSS. Можно только надеяться, что они скоро добавят свойства.
Я не знаю ответа, но мне нравится вносить свой вклад в это дело за то, что он стоит. Было бы здорово, если бы они выпустили justify-self
для flexbox, чтобы сделать его действительно гибким.
В моем убеждении, когда на оси есть несколько элементов, наиболее логичным способом поведения justify-self
является согласование с ближайшими соседями (или ребрами), как показано ниже.
Я действительно надеюсь, что W3C будет смотреть это и, по крайней мере, подумает об этом. =)
Таким образом, вы можете иметь элемент, который по-настоящему центрирован независимо от размера левого и правого окна. Когда один из ящиков достигает точки центрального блока, он просто нажимает его, пока не будет больше места для распространения.
Легкость сделать удивительные макеты бесконечными, взгляните на этот «сложный» пример.
justify-self
и justify-items
.
– Michael_B
23 November 2015 в 06:30
auto
не являются полной заменой justify-self
. Я был осторожен, чтобы записать свой предыдущий комментарий, указав, что поля auto
будут охватывать некоторые из вариантов использования i>. Как вы отметили, он не может центрировать предмет на месте, когда смежные предметы имеют разные размеры. Однако он предоставляет больше возможностей для выравнивания элементов гибкости. Когда я впервые начал изучать flexbox, я думал, что justify-content
и невидимые элементы спейсеров были единственным способом.
– Michael_B
24 November 2015 в 15:40
Есть justify-items
.
Я думаю, что это новая функция. Совместимость браузера несколько отсутствует.
justify-items
не относится к flexbox. stackoverflow.com/q/49474480/3597276
– Michael_B
20 May 2018 в 11:14