Блог

Главная - Вопросы по программированию - Как мне разделить текст на новую строку в flex-box?

Как мне разделить текст на новую строку в flex-box?

#css #flexbox

Вопрос:

Я пытаюсь построить коробку 2×2 с гибкой коробкой, чтобы она выглядела примерно так: введите описание изображения здесь

С моим текущим кодом я не могу заставить текст разделиться на отдельную строку, поэтому мой выглядит так: введите описание изображения здесь

Я пробовал использовать </br> теги, чтобы разбить текст на другую строку, но безуспешно. Кто-нибудь знает, как я мог бы добиться этого? Вот мой код:

 * {
  margin: 0;
  box-sizing: border-box;
}

.deats-cont {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 240px;
  justify-content: center;
  align-content: center;
  text-align: center;
}

.deat {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 100px;
  flex-wrap: wrap;
  /* width: 100px; */
  padding: 20px;
  /* border: 1px solid black; */
  margin: 0px;
}

.deat1 {
  border-bottom: 1px solid black;
  border-right: 1px solid black;
}
.deat2 {
  border-top: 1px solid black;
  border-right: 1px solid black;
}
.deat3 {
  border-bottom: 1px solid black;
  border-left: 1px solid black;
}
.deat4 {
  border-top: 1px solid black;
  border-left: 1px solid black;
} 
    <div class="deats-cont">
      <div class="deat deat1">
        <h1>2K</h1>
      </br>
        <p>Apps developed</p>
      </div>
      <div class="deat deat2">
        <h1>160</h1>
      </br>
        <p>Employees</p>
      </div>
      <div class="deat deat3">
        <h1>12</h1>
      </br>
        <p>Awards Won</p>
      </div>
      <div class="deat deat4">
        <h1>40</h1>
      </br>
        <p>Consultants</p>
      </div>
      
    </div>

И кодовый код: https://codepen.io/caseycling/pen/VwmExMY

Ответ №1:

Вам нужно добавить flex-direction: column; в класс .deat .

https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction

Ответ №2:

В вашем.деат вам нужно дать гибкое направление. По умолчанию используется «строка», поэтому вы захотите сделать «столбец».

 .deat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 0 0 100px;
  flex-wrap: wrap;
  /* width: 100px; */
  padding: 20px;
  /* border: 1px solid black; */
  margin: 0px;
}

Ответ №3:

Пара вещей:

  1. Установлен deat в flex-direction: column
  2. </br> это недопустимый тег, поэтому он ничего не делает.
 * {
  margin: 0;
  box-sizing: border-box;
}

.deats-cont {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 240px;
  justify-content: center;
  align-content: center;
  text-align: center;
}

.deat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 0 0 100px;
  flex-wrap: wrap;
  /* width: 100px; */
  padding: 20px;
  /* border: 1px solid black; */
  margin: 0px;
}

.deat1 {
  border-bottom: 1px solid black;
  border-right: 1px solid black;
}

.deat2 {
  border-top: 1px solid black;
  border-right: 1px solid black;
}

.deat3 {
  border-bottom: 1px solid black;
  border-left: 1px solid black;
}

.deat4 {
  border-top: 1px solid black;
  border-left: 1px solid black;
} 
 <div class="deats-cont">
  <div class="deat deat1">
    <h1>2K</h1>
    <p>Apps developed</p>
  </div>
  <div class="deat deat2">
    <h1>160</h1>
    <p>Employees</p>
  </div>
  <div class="deat deat3">
    <h1>12</h1>
    <p>Awards Won</p>
  </div>
  <div class="deat deat4">
    <h1>40</h1>
    <p>Consultants</p>
  </div>
</div>
Метки: