子要素が親フッター要素の外側にある

Question

私は<footer>に問題があります。 <footer>の子要素は、その外側に配置されます。

子要素を<footer>の中に配置し、子を左から右に揃えるにはどうすればよいですか？あなたのCSSで

footer{ 
 
    background-color: black; 
 
    height: 100px; 
 
} 
 
footer > a, 
 
#link{ 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    width: 100px; 
 
    height: 100%; 
 
    background-color: yellow; 
 
} 
 
#damn{ 
 
    background-color: red; 
 
    width: 100px; 
 
    height: 100px; 
 
}

<footer> 
 
    <a href="#"> 
 
    <div id="link"> 
 
     here we go again 
 
    </div> 
 
    </a> 
 
    <div id="damn"> 
 
    </div> 
 
    why the hell 
 
</footer>

Answer 1

表示flexプロパティは、align-items（横軸）とjustify-contents（主軸）のプロパティに応じて子が整列するように親要素に指定する必要があります。

footer{ 
     background-color: black; 
     height: 100px; 
     display: flex; 
     align-items: center; 
     justify-content: space-between; 
    } 

Answer 2

あなたは100pxにに設定し、すべての要素の高さを持っている - ので、あなたのタグがあなたのフッターのすべての高さをいっぱいにし、あなたの「いまいましい」タグはどこにありませんフッターの下に行く。

編集：OK、フッター内の要素を左から右にします。フッターの直下の子供にdisplay:inline-blockを与えます。 Aタグ内のdiv divにdisplay:flexを置くことができます。