フレックスボックスを使用して画像の下にテキストを配置しようとしています

Question

pタグを画像の下に揃えようとしています。シンプルにする必要がありますが、私はこれをちょっとやってしまったので、何かを見てはいけません。ここに私のコードは次のとおりです。

.project { 
 
    display: flex; 
 
    justify-content: center; 
 
    vertical-align: top; 
 
    text-align: center; 
 
} 
 
.project1 { 
 
    height: 10rem; 
 
    width: auto; 
 
    border: 5px solid rgba(52, 73, 94, 1); 
 
} 
 
.project1info { 
 
    background: rgba(52, 73, 94, 1); 
 
    text-align: center; 
 
    display: block; 
 
}

<div class="panel"> 
 
    <h1 class="subHead">Some Projects I Have Worked On</h1> 
 
    <h2 class="description"></h2> 
 
</div> 
 
<div class="project"> 
 
    <a href="https://hidden-brook-12046.herokuapp.com/"> 
 
    <img class="project1" src="./images/featuring.png" alt="" /> 
 
    </a> 
 
    <p class="project1info"> 
 
    Featuring allows a user to search a musical artist and view a list of collaboraters they have worked with. 
 
    </p> 
 
</div>

Answer 1

を使用しています。これは、フレックスコンテナの子が水平に整列することを意味します。

縦に積み重ねる場合は、デフォルト値をflex-direction: columnで上書きします。何らかの理由で、あなたがflex-direction: rowでコンテナを維持する必要がある、場合

.project { 
    display: flex; 
    flex-direction: column; /* NEW */ 
    justify-content: center; 
    vertical-align: top; 
    text-align: center; 
} 

、あなたはflex-wrap: wrapを追加し、最初のフレックス項目に100％の幅を与えることができます。これにより、2番目のフレックスアイテムが強制的に次の行に折り返されます。

.project { 
    display: flex; 
    flex-wrap: wrap; /* NEW */ 
    justify-content: center; 
    vertical-align: top; 
    text-align: center; 
} 
.project > a { 
    flex: 0 0 100%; /* NEW */ 
} 

Answer 2

チェックこのfiddle

.project { 
    display: flex; 
    justify-content: center; 
    flex-direction: column; 
} 

フレックスコンテナの初期設定がflex-direction: rowあるflex-direction: column;