css flexbox wrapping: аналог псевдоклассов для выбора начальных/конечных элементов на главной/поперечной оси?

Флексбокс — отличная штука. Но для большей универсальности при использовании flex wrapping: нужны псевдоклассы, аналоги first-child или last-child или nth-child.

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

Например, я хочу это:

.flexbox
{
    display: flex;
    flex-flow:row wrap;
}

.flexbox .item:flex-start
{
    /*items in the left of container selector*/
}

.flexbox .item:flex-end
{
    /*items in the right of container selector*/
}

.flexbox .item:flex-cross-start
{
    /*items on the top of container selector*/
}
.flexbox .item:flex-cross-end
{
    /*items on the bottom of container selector*/
}

Но печально - нет псевдоклассов с гибким предметом.

Вопрос: могу ли я написать селектор css (без JS), определяющий элементы в wrap-flex-контейнере, находящиеся в начале/конце главной/поперечной оси, или нет?

подвопрос: почему нет псевдоклассов для flexbox, есть ли какие-то концептуальные противоречия?


html css flexbox pseudo-class
person Alexander Goncharov    schedule 19.07.2016    source источник
comment
меня смущает ваш вопрос   -  person DataCure    schedule 19.07.2018

Ответы (1)


arrow_upward
-1
arrow_downward

Q1: Могу ли я написать селектор css (без JS)?

CSS назначит любую презентацию HTML-тегу, будь то официальный или неофициальный HTML. Например.

myEnclosure{
  background: black;
  color: white;
  display: block;
  font-family: arial;
  font-size: 18pt;
  height: 300px;
  line-height: 3em;
  Width: 100%
}
ScoreBoardTitle{
 display: block;
 font-size: 30pt;
 margin: 0 auto;
 text-align: center;
 width: 100%
}
myList{
  Color: yellow;
  display: block;
  position: relative;
  left: 30px;
  top: 2em;
}
ListItem{
  display: block;
  margin: 0;
  position: relative;
  top: -2em;
}
<myEnclosure>
  <myScoreBoard>
    <ScoreBoardTitle>LAKERS VS UNKNOWN</ScoreBoardTitle>
    <myList>
      <ListItem>Hello
      <ListItem>Hello 2
      <ListItem>Hello 3 
      <ListItem>Hello 4
    </myList>
  </myScoreBoard>
</myEnclosure>

Как вы можете видеть, мой HTML не является официальным, а селектор CSS является «селектором тегов». Итак, чтобы ответить на ваш вопрос, можете ли вы написать селектор CSS без JavaScript

Ответ: Да Как видно из моей демонстрации, все селекторы являются пользовательскими.

Однако свойства и значения в блоке селектора должны соответствовать стандарту CSS, поскольку CSS не является языком, который позволяет использовать функции или классы с точки зрения объектно-ориентированного программирования.

Вопрос 2. Почему нет псевдоклассов для flexbox? Псевдоклассы применяются к элементу, на который вы ссылаетесь, и к состояниям событий. Псевдоклассы элементов не настраиваются на основе значений свойств. прочитайте код и следуйте тому, что сделал разработчик, и это было бы исключительно запутанным.

Естественно, если вы хотите, чтобы элемент вел себя определенным образом в зависимости от его типа отображения, тогда JavaScript предлагает возможность создавать функции и объекты, чтобы затем программировать их поведение.

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

person DataCure    schedule 19.07.2018
comment
Вопрос Q1, на который вы отвечаете в первой части, на самом деле не тот, что здесь задавали… Они хотят знать, есть ли какой-либо способ нацеливания на элементы на основе того, как они в настоящее время распределены внутри flex-контейнера. Ваше «все селекторы являются пользовательскими» не имеет к этому абсолютно никакого отношения и не дает ни единого ответа на этот вопрос. - person CBroe; 19.07.2018