フレックスボックスで縦方向に中心を合わせてワードラップを強制するには？

Question

primary__wraperを縦方向に集中させたいが、うまくいかない。

また、単語の折り返しを強制したいと思います。現時点では "częscizamienne"が並んでいます。

2行目にどのように押し込むことができますか。 2番目の行に "zamienne"を意味します。

here is a codepen demo

HTMLコード

<section class="primary"> 
    <div class="primary__wraper"> 
     <figure> 
      <img src="../build/img/ikona_klucz.png" alt=""> 
      <figcaption>serwis</figcaption> 
     </figure> 

     <figure> 
      <img src="../build/img/box_icon.png" alt=""> 
      <figcaption>częsci zamienne</figcaption> 
     </figure> 
    </div> 
</section> 

そしてSASSコード

.primary { 
background: -webkit-linear-gradient(top, rgb(10,198,162) 0%,rgb(0,160,175) 100%); 
height: 500px; 
width: 100%; 

&__wraper { 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 

    figure { 
     img { 
      width: 100px; 
     } 

     figcaption { 
      font-family: $font; 
      text-transform: uppercase; 
      font-weight: 700; 
      @include font-size(30px); 
      text-align: center; 
      color: rgb(255,255,255); 
      padding-top: 10px; 
     } 
    } 
} 

Answer 1

使用インラインCSSやワードラップを行うための別のクラスを与えます。

.primary { 
 
background: -webkit-linear-gradient(top, rgb(10,198,162) 0%,rgb(0,160,175) 100%); 
 
height: 500px; 
 
width: 100%; 
 

 
&__wraper { 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: center; 
 
    align-items: center; 
 

 
    figure { 
 
     img { 
 
      width: 100px; 
 
     } 
 

 
     figcaption { 
 
      font-family: $font; 
 
      text-transform: uppercase; 
 
      font-weight: 700; 
 
      @include font-size(30px); 
 
      text-align: center; 
 
      color: rgb(255,255,255); 
 
      padding-top: 10px; 
 
      
 
      
 
     } 
 
     
 
    } 
 
    
 
} 
 
    
 

<section class="primary"> 
 
    <div class="primary__wraper"> 
 
     <figure> 
 
      <img src="../build/img/ikona_klucz.png" alt=""> 
 
      <figcaption>serwis</figcaption> 
 
     </figure> 
 

 
     <figure> 
 
      <img src="../build/img/box_icon.png" alt=""> 
 
      <figcaption style="width:64px;word-wrap: break-word;">częsci zamienne</figcaption> 
 
     </figure> 
 
    </div> 
 
</section>

Answer 2

フレックスコンテナは子要素（別名、 "フレックスアイテム"）を位置合わせするためにフレックス特性を使用することができます。

縦に揃えたい要素（primary__wraper）はフレックスコンテナですが、フレックスアイテムはありません。

primary__wraperを垂直に中心にする簡単な方法は、親をフレックスコンテナにすることです。

.primary { 
    display: flex;    /* new */ 
    justify-content: center; /* new */ 
    align-items: center;  /* new */ 
    background: -webkit-linear-gradient(top, rgb(10,198,162) 0%,rgb(0,160,175) 100%); 
    height: 500px; 
    width: 100%; 
} 

フレックスアライメントプロパティは、子に適用されます。

私もfigure要素の子に適用されるtext-align: centerを追加し、あなたのHTML内のエラーを訂正：あなたは<figure class="primary__figure">でなければなりません<figure="primary__figure">を持っていました。これで、CSSのターゲットとすることができます。