align-content-around

bootstrap5.css

bootstrap5.css
.align-content-around {
  align-content: space-around !important;
}

html bootstrap5 Sample

flex縦の均等配置/高さ固定で、行間自動調整:align-content-around


flex文字01
flex文字02
flex文字03
flex文字04
flex文字05
flex文字06
flex文字07
flex文字08
flex文字09
flex文字10
  <div class="d-flex align-content-around flex-wrap" style="height: 200px">
    <!-- height固定で、行間自動調整 -->
    <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>