flexbox order の入れ子について

html
1コード<body>
2<div id="flex-container">	<!-- ページ全体に設定  -->
3<header>
4	<h1>flexbox</h1>
5</header>
6<nav id="top-nav"> 
7	<ul >
8		<li ><a href="xxx.html">flexible-test</a></li>
9	</ul>
10</nav>
11<main>
12	<nav class="nav01">
13		<h3>nav01</h3>
14		<ul>
15			<li><a href="xxx.html">nav01-1</a></li>
16		</ul>
17	</nav>
18	
19	<section class="main-page">
20	<article class="notes">
21		<h3>content 1</h3>
22		<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
23		<hr />
24	</article>
25	<article class="notes">
26		<h3>content 2</h3>
27		<p >xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
28		<hr />
29	</article>
30	</section>
31</main>
32</div> <!-- flex-container -->
33コード
34
35```ここに言語を入力
36コード

css3
1コード#flex-container{
2	display:flex;
3}
4#flex-container header {
5	display:flex;
6}	
7nav#top-nav ul {
8	display:flex;
9	flex-direction:column;
10}
11main {
12	display: flex;
13	flex-direction: column;
14}
15nav.nav01 {
16	order:2;
17}
18nav.nav01 ul{
19	display:flex;			/* ulをflex化 */
20	flex-direction:column;
21}
22.main-page {
23	display:flex;
24	flex-direction:column;
25	order:-1;				/* 0指定では上手く機能しない */
26}
27
28下記などを記述してみましたが、機能しませんでした。
29#flex-container main{
30order:-1;
31}
32他、main にクラスを設定して
33main.xxx {
34order:-1;
35}
36など
37

main 内の順番の入れ替えは上記のコードで出来ているのですが、#flex-container の子であるheader、top-nav 、main の表示順を変更するにはどのようにするといいのでしょうか？
webを自分でコードを書いてみようと思って始めたばかりで、知識不足で申し訳ありませんが、よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

とりあえず逆に入れ替えてみました。
こちらの追加でいけるかと。

css
1#flex-container header {
2	order: 2;
3}
4#top-nav {
5	order: 1;
6}
7main {
8	order: 0; /* 初期値はもともと0なので実際は指定の必要はありません */
9}

投稿2016/10/31 03:01

gin

総合スコア2722

gin

2016/10/31 03:07

改めて見てみると変ですね。「#flex-container main{order:-1;}」でも効く(mainが左に来る)んですが… もし↑でダメな場合、環境(Win7のfirefoxで見てる)などを書いてください。

kyunta

2016/10/31 03:51

ginさん、ご回答ありがとうございます。環境はwindows10、edge、firefoxで見ています。 cssは <link rel="stylesheet" href="small.css" media="screen and (max-width:480px)"> <link rel="stylesheet" href="medium.css" media="screen and (min-width:480px) and (max-width:1024px)"> <link rel="stylesheet" href="wide.css" media="screen and (min-width:1024px)"> で３つ読み込んでいてsmall.css でmain 内の順番の入れ替えは機能しているのですがmainを子として入れ替える事が出来ずにいます。 main 内でorderを使った場合にその親のflex-containerでのorderは機能しないのかもと思ったのですが、ginさんのご回答で記述自体はこれで良いという事なのでもう少しいじってみます。

gin

2016/10/31 04:09

ん？small…？もしかして「header」「#top-nav」「main」を縦積みにしようとして「display:flex;」解除してませんか？

kyunta

2016/10/31 04:21

#flex-container{ display:flex; } #flex-container header { display:flex; } nav#top-nav { display:flex; } nav#top-nav ul { display:flex; flex-direction:column; } main { display: flex; flex-direction: column; } nav.nav01 { order:2; } nav.nav01 ul{ display:flex; /* ulをflex化 */ flex-direction: column; } .main-page { display:flex; flex-direction: column; order:-1; /* 0指定では上手く機能しない */ } #flex-container header { order: 2; } #top-nav { order: 1; } main { order: -1; /* 初期値はもともと0なので実際は指定の必要はありません */ } ginさん、ありがとうございます。現在、上記のコードで動作させています。各範囲にflexを設定していると思うのですが、まだ上手くいっていません。

gin

2016/10/31 04:28

うーん。こちらWin7のff＆GCで見てみましたが、指定通り左からmain、#top-nav、headerの順になってますね～そもそもCSS読み込まれていないってことはないですよね？ color:red;とかで文字の色変わりますよね？

kyunta

2016/10/31 04:39

ginさん、ありがとうございます。 480px以下で他の設定（横表示から縦表示など）は反映されていますので、読み込まれていると思います。何が影響しているのか、もう少し弄ってみます。

gin

2016/10/31 04:42

kyuntanさんのところではどうなってます？左からheader、#top-nav、mainの順なのですか？

gin

2016/10/31 04:46

上記の場合、開発ツールなどで「#flex-container」に「display:flex;」がきいているか調べてみてください。

kyunta

2016/10/31 05:36

ginさん、ありがとうございます。「#flex-container」に「display:flex;」が効いていません。何が問題なのか（classに変えたり、ほかの２つのcssを空にしてみたり）色々弄ってみたのですが上手くいきません。何かバカなミスをしていそうですが。。。

gin

2016/10/31 06:04

全角文字が紛れ込んでたりしちゃってるというのがよくあるパターンですが… 全角スペースだったりコロン・セミコロンが全角だったり。それがないという場合は、詳細度(優先度)の高いスタイルで上書きなどがされているとか。これは開発ツールで今どのdisplayが効いているのかを見れば分かります。開発ツールでdisplayの指定が見当たらない(つまりブラウザ初期値が適用されている)場合は、上で書いたように何かしらの記述ミスがあります。

kyunta

2016/10/31 06:26

ginさん、ありがとうございます。現在、flex-containerの更に親を<div id="allpage"></div>で作るとflex-containerがflexに設定されます。一番外側のdivがflexにならないという状態です。目的の順番は変更できたのですが、原因は不明です。もう少し弄ってみます。

gin

2016/10/31 06:38

flex-containerの閉じタグとかが足りてなかったとか？<div id="allpage"></div>の＜/div＞がflex-containerの閉じタグとして機能したんじゃないですかね？予測ですが。

gin

2016/10/31 06:39

閉じタグのほうは残して開始の<div id="allpage">だけ取ってみると分かるかも。

kyunta

2016/10/31 07:15

ginさん、ありがとうございます。 divタグは検索もしてみたのですが対になっているようです。「開発ツールで今どのdisplayが効いているのかを見れば分かります」とはflex-containerのdisplay:flex　がどのcssのコードで設定されたものかという事でしょうか？もしそうでしたら、small.cssでの設定であるとなっています。 allpageは「何もみつかりませんでした」の表示になっています。

gin

2016/10/31 07:26

今現在設定されているflex-containerのdisplayの値ですね。 firefoxでアドオンのfirebugを使用している場合は、flex-containerを選択して「累計」を見てください。何かしらで設定されていれば、displayの項目があります。設定されていなくてブラウザ初期値のままだと項目は出ません。

kyunta

2016/10/31 08:50

ginさん、ありがとうございました。 firebugを入れて確認いたしました。 display:flexが効いているかとのご指摘は今回とても参考になりました。書いているので設定されていると思い込んでいました。このご指摘によって表示順序を変更する所まで出来ました。私一人ではここまで辿り着く事は出来なかったと思います。どこかミスしているのだと思いますが、今の私の知識では見つけ出すのに時間が掛かりそうですので一旦解決とさせていただきます。原因が分かりましたら追記致します。初心者の質問に御付き合い頂きありがとうございました。

gin

2016/10/31 09:02

質問のソースだけだとちゃんと動くので、それに徐々に肉付けしていって効かなくなるポイントを探すとかもありますが… これは慣れてないと時間かかかるかもです。質問のソースを1ページとして用意する。＜CSSもそこに直書き <link rel="stylesheet" href="small.css" media="screen and (max-width:480px)">などを1つ1つ足してみる。＜ここで崩れたらそのファイルです。問題なければ今度はhtmlを外側に向けて1個1個足していくって感じです。

kyunta

2016/10/31 09:25

ginさん、ありがとうございます。始めたばかりでcssで自在に表示ができるというレベルではないので、ご指摘のように少しずつ肉付けしながら確認しようと思っています。 ginさんにコード自体に問題は無いという事を確認して頂いているのでそこに時間を費やすことが無くなったのでとても助かっています、ありがとうございます。色々なことを確認しながら少しずつ進めていこうと思います。ありがとうございました。

gin

2016/10/31 09:34

まずはこれが左からmain,#top-nav,headerの順に並んでることを確認してから始めてください。 ※分かりやすいようにborderつけてます。 ------- <!DOCTYPE html> <html lang="ja"> <head> <title>test</title> <meta charset="UTF-8"> <style type="text/css"> #flex-container{ display:flex; } #flex-container header { display:flex; } nav#top-nav { display:flex; } nav#top-nav ul { display:flex; flex-direction:column; } main { display: flex; flex-direction: column; } nav.nav01 { order:2; } nav.nav01 ul{ display:flex; /* ulをflex化 */ flex-direction: column; } .main-page { display:flex; flex-direction: column; order:-1; /* 0指定では上手く機能しない */ } #flex-container header { order: 2; border:1px solid; } #top-nav { order: 1; border:1px solid; } main { order: 0; /* 初期値はもともと0なので実際は指定の必要はありません */ border:1px solid; } </style> </head> <body> <div id="flex-container">  <header> <h1>flexbox</h1> </header> <nav id="top-nav"> <ul > <li ><a href="xxx.html">flexible-test</a></li> </ul> </nav> <main> <nav class="nav01"> <h3>nav01</h3> <ul> <li><a href="xxx.html">nav01-1</a></li> </ul> </nav> <section class="main-page"> <article class="notes"> <h3>content 1</h3> <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p> <hr /> </article> <article class="notes"> <h3>content 2</h3> <p >xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p> <hr /> </article> </section> </main> </div>  </body> </html> -------

kyunta

2016/10/31 11:01

ginさん、ありがとうございます。状況は、そのままコピーではflex-container:flex　になりorder　が機能します。それがCSSを別ファイル（<style></style>を除いてそのままコピー、頭に@charset "utf-8"を付けただけ）にして参照させるとflex-container:flexにならず、order のみ機能しません。他の設定は反映されます。 <meta name="viewport" content="width=device-width, initial-scale=1"> を付けたり、外したりなどしてみたのですが、変化はありませんでした。別ファイルにした場合に何か記述するものがあるのでしょうか？

kyunta

2016/10/31 11:21

原因は不明ですが、回避策は見つかりました。 CSSファイルの最初の設定が反映されないという状況です。その為、無意味な#hoge{}を入れるとflex-container:flexが効きます。

kyunta

2016/10/31 12:25

ginさん、申し訳ありません。 @charset　を　; で閉じていませんでした。全然見ていませんでした、本当に申し訳ありません。こんなつまらないミスに長い間お付き合いさせてしまって本当に申し訳ありません。そして、本当にありがとうございました。

gin

2016/10/31 13:11

いえいえ～、何らかの記述ミスとも思ってましたしすっきりしてよかったですねｗまあ、でも一応言っておきますかｗヽ(・ω・)/ ｽﾞｺｰ

kyunta

2016/10/31 14:05

ginさん、本当にすみません。こんなミスに昨日一日と今日はginさんにお付き合い頂いてやっと気付くというバカやってしまいました。分かってしまうと何で目に入らなかったんだろうと思いますが、全く意識がいっていませんでした＞＜注意が全く別方向に行ってしまっていました。 ginさんに付き合っていただいていなければ、今でも別方向に走り続けていたと思いますので本当にありがとうございました。おかげ様でcss3だけでレスポンシブを完成することができました。本当にありがとうございました。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.31%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

flexbox order の入れ子について

関連した質問