Flexbox Layout - равные высоты и подходящий текст

Question

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

  body,html {
  margin:0;
  padding:0;
  height:100%;
  }
  
  .container {
    height:100%;
    display:flex;
    flex-direction:column;
  }

  .top {
    flex:4;
    display:flex;
    background:wheat;
    align-items: center;
    justify-content: center;
  }

  .bottom {
    flex:1;
    background:teal;
  }

  .bottom_content {
    display:flex;
    flex-direction:column;
  }

  .section1 {
    flex:1;
    font-size:20px;
    text-align:center;
  }

  .section2 {
    flex:1;
  }
  
  .btn {
    background:red;
    color:white;
    padding:20px;
  }

<div class="container">

  <div class="top">
    <span>TOP CONTENT</span>
  </div>
  
  <div class="bottom">
    
    <div class="bottom_content">
      
      <div class="section1">
        <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lacus quam, blandit non lacus in, venenatis tempor dolor. Aliquam in lectus lacus. </span>
      </div>
      
      <div class="section2">
        <div class="btn">
          THIS IS A BUTTON
        </div>
      </div>
    
    </div>
  
  </div>

  
</div>

Я пытаюсь добиться этого ...

Как можноЯ делаю нижнюю секцию равной высоты и выравниваю содержимое в ней по вертикали и горизонтали?

Я также планирую использовать fittext.js или аналогичный, чтобы кнопка и текст выше помещались в элемент flex.

Куда я иду не так?

Answer 1

Я прокомментировал некоторые из ваших кодов.Пожалуйста, проверьте

body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
}

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.top {
  flex: 4;
  display: flex;
  background: wheat;
  align-items: center;
  justify-content: center;
}

.bottom {
  flex: 1;
  background: teal;
}

.bottom_content {
  display: flex;
  flex-direction: column;
}

.section1 {
  <!-- flex: 1;
  -->font-size: 20px;
  text-align: center;
}

.section2 {
  flex: 1;
}

.btn {
  background: red;
  color: white;
  padding: 20px;
  margin-top: 25px;
}

<div class="container">

  <div class="top">
    <span>TOP CONTENT</span>
  </div>

  <div class="bottom">

    <div class="bottom_content">

      <div class="section1">
        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lacus quam, blandit non lacus in, venenatis tempor dolor. Aliquam in lectus lacus. </div>
        <button class="btn">
          THIS IS A BUTTON
        </button>
      </div>

      <!-- <div class="section2"> -->
      <!-- <div class="btn"> -->
      <!-- THIS IS A BUTTON -->
      <!-- </div> -->
      <!-- </div> -->

    </div>

  </div>


</div>

Answer 2

justify-content:center и display:flex - это ключ.

вы можете отрегулировать запас по своему усмотрению, кроме того, это должно помочь.

.bottom_content {
   display: flex;
   flex-direction: column;
   margin-top: 20px;
}

.section2 {
   flex: 1;
   display: flex;
   justify-content: center;
}

.btn {
   background: red;
   color: white;
   padding: 20px;
   width: fit-content;
   position: absolute;
   margin-top: 10px;
}

Answer 3

Проблема

Проблема с вашим текущим кодом заключается в том, что .bottom не заполняет доступное пространство и используется выравнивание и выравнивание по умолчанию.

Исправление

Желаемый результат может быть достигнут следующим образом:

• Удалить flex:1; из .section1 и .section2.Это останавливает эти div s от расширения до заполнения доступного пространства
• Добавьте align-items: center; и justify-content: space-evenly; к .bottom_content.Это выровняет по центру и равномерно разметит .section1 и .section2 div s
• Добавьте display: flex; к .bottom.Это увеличит .bottom в соответствии с доступным пространством
• Измените flex: 1; на flex: 1 0 auto; на .bottom.Это остановит .bottom от уменьшения в размере, когда высота окна мала

body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
}

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.top {
  flex: 4;
  display: flex;
  background: wheat;
  align-items: center;
  justify-content: center;
}

.bottom {
  /*Change*/
  flex: 1 0 auto;
  background: teal;
  /*Add*/
  display: flex;
}

.bottom_content {
  display: flex;
  flex-direction: column;
  /*Add*/
  align-items: center;
  justify-content: space-evenly;
}

.section1 {
  /*Remove*/
  /*flex:1;*/
  font-size: 20px;
  text-align: center;
}

.section2 {
  /*Remove*/
  /*flex:1;*/
}

.btn {
  background: red;
  color: white;
  padding: 20px;
}

<div class="container">
  <div class="top">
    <span>TOP CONTENT</span>
  </div>
  <div class="bottom">
    <div class="bottom_content">
      <div class="section1">
        <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lacus quam, blandit non lacus in, venenatis tempor dolor. Aliquam in lectus lacus. </span>
      </div>
      <div class="section2">
        <div class="btn">
          THIS IS A BUTTON
        </div>
      </div>
    </div>
  </div>
</div>