親要素に対してdisplay:flexを指定して flex-direction: column-reverse;をしたのですが、上下逆になりません。
仮にdivタグで親要素でpタグを子要素を二つ作ったら上手く上下逆に指定できました。どうして上下逆の順番に指定できないのでしょうか?orderでも指定してみましたが、上手くいきませんでした。
原因がわかる方教えてもらえると幸いです。```ここに言語を入力
コード
<div class="article_img"> <img src="img/article.jpeg" alt=""> </div> <div class="article_content"> <h2 class="article_header">ABOUT</h2> <p class="article_text">私たちについて</p> <p class="article_p">テキストテキストテキストテキスト<br>テキストテキストテキストテキスト<br>テキストテキストテキストテキスト<br>テキストテキストテキストテキスト<br>テキストテキストテキストテキスト </p> </div> </article> /* article */ .article { display: flex; flex-direction: column-reverse; } .article_content { order: 1; } .article_img img { width: 100%; } .article_header { margin: 50px 0 0 0; } .article_content { text-align: center; } .article_text { border-bottom: 2px solid #000; padding-bottom: 10px; width: 120px; text-align: center; margin: 0 auto; } .article_p { margin-top: 50px; }
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2022/06/24 03:58