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

html css css3 flexbox pseudo-class

413 просмотра

1 ответ

683 Репутация автора

Flexbox - отличная вещь. Но для большей универсальности, когда используется гибкая упаковка: ей нужны псевдо-классы, аналоги первого или последнего ребенка или nth-ребенка.

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

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

.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-container, которые находятся в начале / конце главной / поперечной оси, или нет?

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

Автор: Alexander Goncharov Источник Размещён: 19.07.2016 12:27

Ответы (1)


-1 плюса

397 Репутация автора

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 не является языком, который допускает функции или классы с точки зрения объектно-ориентированного программирования.

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

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

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

Автор: DataCure Размещён: 19.07.2018 01:17
Вопросы из категории :
32x32