Отображение: гибкий элемент не будет расти вертикально внутри родительского

ProgramBox

Отображение: гибкий элемент не будет расти вертикально внутри родительского

Post author:admin
Запись опубликована:14 декабря, 2022
Post category:Вопросы по программированию

#html #css #flexbox

#HTML #css #flexbox

Вопрос:

У меня есть веб-страница, на которой я хочу центрировать одну из страниц как по вертикали, так и по горизонтали, вот так:

 <main>
  <div>
    This has to be centered both vertically and horizontally.
  </div>
</main>

Я не могу изменить отображение main , поскольку он широко используется для всех страниц, и его использование flex слишком много ломает.

Я предположил, что это должно сработать, но это не так, потому div что не увеличивается в высоту:

 main {
  min-height: 1000px;
  border: solid 1px red;
}

div {
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: stretch;
  flex-grow: 1;
}

Я бы предпочел этого не делать position: absolute; top: 0; right: 0; bottom: 0; left: 0; .

Любые подсказки, как я могу растянуть свой div , чтобы заполнить main ? Почему это не сработает из коробки, не может flex просто расти внутри элементов с block/inline-block дисплеями?

https://jsfiddle.net/wcu6fnz5/

1. flex-grow бесполезен, потому что ему нужно, чтобы родительский элемент отображался; flex, а не сам элемент

2. На самом деле на данный момент это не имеет значения, гибкий рост был добавлен только потому, что, если бы у него был гибкий родительский элемент, он бы рос вертикально, прямо сейчас он ничего не делает, как вы указали. Я предполагаю, что flex в основном бесполезен при использовании внутри элементов block / inline-block? Эх…

3. дисплей: гибкий; всегда должен применяться к родительскому элементу

4. Я не могу изменить отображение main, поскольку он широко используется для всех страниц -> Использовать ID / classes для некоторых конкретных случаев. Это звучит как проблема дизайна / концепции, а не CSS

5. @TemaniAfif Я понял вашу точку зрения. Это было бы немного проще, но я вообще не контролирую и не использую классы в этом проекте, стилизованном под компоненты. О, технология.

Ответ №1:

Это может вам помочь.

 /* I cannot edit main, there are 100s of pages based on it, cant change its display etc. */

main {
  min-height: 200px;
  border: solid 1px red;
}

div {
    display: flex;
    min-height: inherit;
    justify-content: center;
    align-items: center;
}

 <main>
  <div>
    <span>This has to be centered both vertically and horizontally.</span>
  </div>
</main>

Развернуть фрагмент

Ответ №2:

Особенность flexbox в том, что вы должны сосредоточиться на инструктировании родителя, а не дочернего элемента.

В вашем примере justify-content и display: flex должен быть в родительском. Вы также можете использовать flex-direction: column , чтобы сообщить браузеру, что вы хотите, чтобы дочерний элемент рос вертикально.

Вы также можете использовать flex: 1 в качестве сокращения для flex-grow. Таким образом, дочернему элементу даже не нужно display: flex .

 main {
  min-height: 1000px;
  border: solid 1px red;
  display: flex;
  flex-direction: column;
  justify-content: stretch;
}

div {
  flex: 1;
}

Обновить

Чтобы достичь того, что вы упомянули в комментариях, почему бы вам не попробовать это:

 main {
  min-height: 1000px;
  border: solid 1px red;
}

section {
  height: 1000px;
  width: 100px;
  background: gainsboro;

  /* important stuff */
  display: flex;
  flex-direction: column;
  justify-content: stretch;
}

div {
  flex: 1;
  width: 40px;
  background: aquamarine;
}

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

1. Поддержано. Итак, мой вопрос — могу ли я каким-то образом поместить гибкий родительский элемент внутри main , а затем использовать div внутри этого родительского элемента? Я пробовал это, но оболочка flex, похоже, тоже не растет… Я думаю о чем-то вроде <main><section><div></div></section></main> where section has has flex . Не могу понять это :/

2. @Wordpressor должен быть сделан для правильного ответа, а не неправильного , который противоречит вопросу.. на самом деле вы сделаете свой вопрос более запутанным. Итак, если я предложу вам решение, используя position:absolute, вы поддержите меня? если это так, позвольте мне ответить на повторяющийся вопрос.

3. @TemaniAfif Не могли бы вы подробнее рассказать о том, как мой ответ противоречит вопросу? Я буквально показываю ему, как добиться того, чего он хочет, и объясняю, как работает flexbox.

4. он сказал, что я не могу изменить отображение main, поскольку он широко используется для всех страниц, а использование flex там слишком много ломается. —> и вы изменили main в обоих ваших примерах

5. @FilipeMerker Я чувствую, что ваш второй ответ был точен и совсем не противоречив, но, похоже, это вообще не работает, мы что-то упускаем? Обратите внимание, что я также не хочу устанавливать высоту в разделе, поэтому я использую flex. jsfiddle.net/qpcvx0Lg