使用弹性列父级停止从换行到新行

问题描述 投票：0回答：3

当父级为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>
html css flexbox
3个回答
1
投票

您可以将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
投票

也将文本换成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;
}
0
投票

您应使用display:contents

.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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.