Остановить переход от перехода на новую строку с родителем столбца flex - PullRequest
Новая
       0

Остановить переход от перехода на новую строку с родителем столбца flex

0 голосов
/ 23 марта 2020

Есть ли способ остановить переход диапазона на новую строку, когда родительский элемент равен flex-direction: column? 

.card-content-column {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  margin-top: 20px;
}

.card-content-column__title {
  font-size: 24px;
  width: 100%;
  margin-bottom: 15px;
  color: #004a88;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
<div class="card-content-column">
  <!--title row-->
  <h2 class="card-content-column__title">Taken with natural breathing
    <span class="asterisk-weight-normal">*</span></h2>
  <!--content-->
</div>

Ответы [ 3 ]

1 голос
/ 23 марта 2020

Вы можете изменить свойство отображения h2 на inline-block . Это будет работать. 

 .card-content-column {
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        width: 100%;
        margin-top: 20px;
      }

      .card-content-column__title {
        font-size: 24px;
        width: 100%;
        margin-bottom: 15px;
        color: #004a88;
        display: inline-block;
      }
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

  </head>
  <body>
    <body>
      <div class="card-content-column">
        <!--title row-->
        <h2 class="card-content-column__title">
          Taken with natural breathing
          <span class="asterisk-weight-normal">*</span>
        </h2>
        <!--content-->
      </div>

      <script src="index.js"></script>
    </body>
  </body>
</html>
0 голосов
/ 23 марта 2020

Вы должны использовать дисплей: содержание 

.card-content-column {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  margin-top: 20px;
}

.card-content-column__title {
  font-size: 24px;
  width: 100%;
  margin-bottom: 15px;
  color: #004a88;
  display: flex; 
  flex-direction: column;
  justify-content: flex-end;
}

.card-content-column__title .asterisk-weight-normal {
  display: contents;
}
<div class="card-content-column">
  <!--title row-->
  <h2 class="card-content-column__title">
    Taken with natural breathing
    <span class="asterisk-weight-normal">*</span>
    <span>extra column</span>
    <span>extra column</span>
  </h2>
  <!--content-->
</div>
0 голосов
/ 23 марта 2020

Оберните текст внутри span тоже и используйте flex-direction: row: 

<h2 class="card-content-column__title">
    <span>Taken with natural breathing</span>
    <span class="asterisk-weight-normal">*</span>
</h2>

.card-content-column__title {
  font-size: 24px;
  width: 100%;
  margin-bottom: 15px;
  color: #004a88;
  display: flex; 
  flex-direction: row;
  justify-content: flex-end;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...