flex-nowrap

bootstrap5.css

bootstrap5.css
.flex-nowrap {
  flex-wrap: nowrap !important;
}

html bootstrap5 Sample

flexの折り返しなし:flex-nowrap


flex文字01
flex文字02
flex文字03
flex文字04
flex文字05
flex文字06
flex文字07
flex文字08
flex文字09
flex文字10
flex文字11
flex文字12
  <div class="d-flex flex-nowrap">
    <!-- d-flex以下は、インラインになるとrowとcolと同じ関係になる -->
    <div>flex文字01</div>
    <div>flex文字02</div>
    <div>flex文字03</div>
    <div>flex文字04</div>
    <div>flex文字05</div>
    <div>flex文字06</div>
    <div>flex文字07</div>
    <div>flex文字08</div>
    <div>flex文字09</div>
    <div>flex文字10</div>
    <div>flex文字11</div>
    <div>flex文字12</div>
  </div>

折り返さない:flex-nowrap


@
  <div class="input-group flex-nowrap">
    <span class="input-group-text" id="addon-wrapping">@
      <input type="text" class="form-control" placeholder="Username" aria-label="Username"
        aria-describedby="addon-wrapping">
  </div>