Q&A
質問内容と、回答者の方とのやりとりを見ると、どうしたいのか分かりにくいので、イメージ図を提示してみてください。
flex属性を持った.innerの子要素は、flexを解除した要素として扱いたいのですが、それらの子要素も横並びになってしまいます。
下記のテストコードでは「テスト1」と「テスト2」が横並びとなってしまいますが、.innerの子要素のdivはデフォルトのものを扱いたいです。
.inner > divとして、子要素はブロック要素を指定、フロートを解除、などの設定も試してみましたが効きませんでした。
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <title>テスト</title> 6 <style> 7 body { 8 padding: 0; 9 margin: 0; 10 } 11 12 main { 13 display: flex; 14 flex-direction: column; 15 height: 100vh; 16 } 17 18 .inner { 19 display: flex; 20 flex: 1; 21 align-items: center; 22 border: 1px solid black; 23 } 24 25 /*.inner直下のdivをリセット（効かなかった）*/ 26 .inner > div{ 27 display: block; 28 float: none; 29 } 30 </style> 31 </head> 32 <body> 33 <main> 34 <div class="inner"><div>テスト１</div><div>テスト２</div></div> 35 <div class="inner"><div>テスト３</div><div>テスト４</div></div> 36 <div class="inner"><div>テスト５</div><div>テスト６</div></div> 37 </main> 38 </body> 39</html>
親要素（main）に対して、.innerは縦並びかつ高さに対して均等に割り振られ、.inner内の中央に配置したいので、.innerそのもののflexは解除できないと思います。
どなたかご教示お願い致します。
回答3件
0
質問内容の理解不足で間違っているかもですが、
flex属性を持った.innerの子要素は、flexを解除した要素として扱いたいのですが、それらの子要素も横並びになってしまいます。
子要素「.inner」にもflexが指定してあるので、「kei344」さんの回答のようにflex関連を外し、text-align: center;で求めている形になりませんか？
CSS
1.inner { 2 border: 1px solid black; 3 text-align: center; 4}
投稿2018/11/17 06:22
総合スコア3523
0
ベストアンサー
.innnerの子要素たちをdivで囲ってください
html
1 <div class="inner"><div><div>テスト１</div><div>テスト２</div></div></div> 2 <div class="inner"><div><div>テスト３</div><div>テスト４</div></div></div> 3 <div class="inner"><div><div>テスト５</div><div>テスト６</div></div></div>
投稿2018/11/14 18:41
総合スコア955
0
CSS
1 .inner { 2 /*display: flex; 3 flex: 1; 4 align-items: center;*/ 5 border: 1px solid black; 6 }
投稿2018/11/14 16:34
総合スコア69407
あなたの回答
tips
プレビュー
