CSS: элемент имеет display: block и не начинает новую строку - PullRequest
Новая
       0

CSS: элемент имеет display: block и не начинает новую строку

0 голосов
/ 14 октября 2019

Пожалуйста, посмотрите на следующий код: 

.header {
  display: flex;
  width: 100vw;
  height: 20vh;
}

div {
  border: solid;
}

#first {
  flex: 1
}

#second {
  flex: 1
}

#third {
  flex: 1
}
<header class="header">
  <div id="first"></div>
  <div id="second"></div>
  <div id="third"></div>
</header>

Этот код дает три прямоугольника, которые лежат один рядом с другим.
Однако, если вы осмотрите каждый прямоугольник, вы увидите в dev-tools

enter image description here

, что эти прямоугольники имеют display: block.

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

Как вы можете это объяснить?

Ответы [ 4 ]

2 голосов
/ 14 октября 2019

Однако я знаю, что когда элемент имеет свойство display: block, это означает, что элемент начинает новую строку.

Ваша информация неверна, поскольку только свойство display никогда не сообщает нам, будет ли у нас новая строка или нет.

Давайте рассмотрим другой пример без flexbox: 

.box {
  width:200px;
  height:200px;
  border:2px solid;
  float:left;
}
<div class="box">

</div>
<div class="box">

</div>

Вы можете четко заметить, что элементы имеют вычисленное значение display, равное блоку, но они не начинаются на новой строке из-за поплавкасвойство. То же самое происходит с flexbox, сеткой CSS, position: absolute и многими другими комбинациями свойств.

Все это определено в спецификации.

Для элементов с плавающей точкой: https://www.w3.org/TR/CSS21/visuren.html#floats

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

Для flexbox: https://www.w3.org/TR/css-flexbox-1/

Отображаемое значение элемента Flex - blockified :. ..

Свойство flex-direction указывает, как элементы flex помещаются в гибкий контейнер , путем задания направления главной оси гибкого контейнера. Это определяет направление, в котором располагаются гибкие элементы.

Направление по умолчанию: row

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

0 голосов
/ 14 октября 2019

Привет, это потому, что ваш заголовок дисплей гибкий. Если он отображает flex, все его дочерние элементы будут отображаться в строке. Вы можете изменить, добавив flex-direction: столбец или строку (по умолчанию)

0 голосов
/ 14 октября 2019

  • дисплей: flex - это говорит вашему браузеру: «Я хочу использовать flexbox с этим контейнером, пожалуйста». Элемент div по умолчанию отображает: box.

  • Элемент с этой настройкой отображения занимает всю ширину линии, в которой он находится. Вот пример четырех цветных div в родительском div с настройкой отображения по умолчанию:

enter image description here

0 голосов
/ 14 октября 2019

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

.header {
  display: flex;
  width: 100vw;
  height: 20vh;
  /* Add this */
  flex-direction:column;
}
div {
  border: solid;
}
#first {
  flex:1
  
}
#second {
  flex:1
}
#third {
  flex:1
}
<body>
    <header class="header">
      <div id="first"></div>
      <div id="second"></div>
      <div id="third"></div>
    </header>
  </body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...