Растягивать flex или отображать внутренние div таблицы вдоль родительского с центрированным текстом - PullRequest
Новая
       43

Растягивать flex или отображать внутренние div таблицы вдоль родительского с центрированным текстом

0 голосов
/ 21 января 2019

Я хотел бы создать адаптивную страницу с фиксированной HTML-структурой, чтобы я мог просто настроить CSS. Я хотел бы создать строки с вертикально и горизонтально центрированными текстами. Div должен полностью растягиваться на родительский div.

Мой HTML ... 

<body>
  <div class="parent">
    <div class="d1">
      one
    </div>
    <div class="d2">
      two
    </div>
    <div class="d3">
      three
    </div>
  </div>
</body>

Мой CSS ... 

body {
  background-color: lightyellow;
  height: 100%;
  width: 100%;
  margin: 0px;
}
.parent {
  background-color: lightblue;
  height: 100%;
}
.d1, .d2, .d3 {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100px;
}
.d2 {
  background-color: lightgreen;
}

Однако здесь я устанавливаю d1, d2 и d3 на высоту 100px, а не на 100% родительского div. Пример здесь: https://jsfiddle.net/bLf2sxq0/

Моя вторая идея состояла в том, чтобы использовать display: table для родителя, что приводит к строкам таблицы для дочерних элементов, но затем я сталкиваюсь с той же проблемой растяжения, плюс тексты не центрированы вертикально. Здесь бы css был бы таким ... 

body {
  background-color: lightyellow;
  height: 100%;
  width: 100%;
  margin: 0px;
}
.parent {
  width: 100%;
  height: 100%;
  display: table;
  background-color: lightblue;
}
.d1, .d2, .d3 {
  text-align: center;
  height: 100px;
}
.d2 {
  background-color: lightgreen;
}

Пример здесь: https://jsfiddle.net/qmbzkwr2/

Есть ли способ растягивать div по вертикали вдоль родителя и держать тексты по центру вертикально и горизонтально внутри div? Таким образом, у меня не было бы ширины 100px, но что-то вроде calc (100% / 3) или какого-либо другого решения для этого? Или, может быть, с помощью опции flex растут? Проще всего это сделать:)

Спасибо за любую помощь!

1 Ответ

0 голосов
/ 21 января 2019

Вы на правильном пути. Используйте flexbox, чтобы растягивать и заполнять элементы вертикально и равномерно. Не забудьте установить родительские контейнеры (например, body, html) на height: 100%.

Здесь, если вы хотите контролировать некоторые элементы, используйте flex для любого отдельного элемента, например, flex: 1 1 300px для класса .d2.

Codepen 

body, html {
  height: 100%;
}

.parent {
   background-color: lightblue;
   height: 100%;
   
   display: flex;
   flex-direction: column;
 }

 .d1, .d2, .d3 {
   display: flex;
   align-items: center;
   justify-content: center;
   flex: 1;
 }

 .d2 {
   background-color: lightgreen;
 }
  <div class="parent">
    
    <div class="d1">
      <div class="d11">
        one
      </div>
    </div>
    
    <div class="d2">
      two
    </div>
    
    <div class="d3">
      three
    </div>
    
  </div>
...