フレックスボックスを使用して2つの要素を並べて配置する

Question

CSSフレックスを使用してページ上でアンカーと段落を横に中央に配置するにはどうすればよいですか？

私はflexを正確にマスターしていませんが、アンカーと段落にfloatを使用しないようにしています。

アンカー/イメージは、全体としては中央に置く必要がありますが、段落の左側に表示する必要があります。

私がこれまでに持っているもの：

section 
 
{ 
 
align-items: center; 
 
display: flex; 
 
flex-direction: column; 
 
}

<section> 
 
<a href="#"> 
 
    <img alt="Example" src="https://jsfiddle.net/img/logo.png" /> 
 
</a> 
 
<p>Description goes here...</p> 
 
</section>

https://jsfiddle.net/eondkrpd/

Answer 1

section { 
 
    display: flex; 
 
    justify-content: center; 
 
}

<section> 
 
    <a href="#"> 
 
    <img alt="Example" src="https://jsfiddle.net/img/logo.png" /> 
 
    </a> 
 
    <p>Description goes here...</p> 
 
</section>

• display: flex
• justify-content: centerに沿ってフレックスアイテムを中心に説明するこの方向に（フレックス商品）、フレックス容器
• flex-direction: row、デフォルト設定（すなわち、それは省略することができる）を作成子を整列させる、主軸水平になりますここでの主な軸は

詳細：Methods for Aligning Flex Items