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

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

新規登録して質問してみよう
ただいま回答率
85.50%
CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

3648閲覧

Flexboxでの箱の並べ方について

yokoyama_takuzo

総合スコア19

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2018/12/15 07:01

編集2018/12/15 08:04

Flexboxを使って今現在このように並んでいるものを、

□□□□□□

□□
□□
□□

このように並べる事は出来ますでしょうか?

申し訳ないです。再度書き直します

HTML

1<div class="box-wrapper"> 2 <div class="box box1">1</div> 3 <div class="box box2">2</div> 4 <div class="box box3">3</div> 5 <div class="box box4">4</div> 6 <div class="box box5">5</div> 7 <div class="box box6">6</div> 8</div>

CSS

1.box-wrapper { 2 display: flex; 3} 4 5.box { 6 border: 1px solid black; 7 width: 100%; 8 height: 100px; 9}

今現在は全て横に並んでいるのですが、
□□□□□□

例えばこれを、タブレットで見た時は2つずつ縦並びに、
□□
□□
□□

そしてスマートフォンで見た時は縦1列にという風にしたいのですが、





縦1列にする分にはflex-direction: column;を足せば問題ないとは思うのですが、
2つずつ縦に並べるという風にするにはどのようにすればいいのか分かる方はいらっしゃいますでしょうか?

出来ればHTMLを極力触らずにこういった事が出来るととてもありがたいのですが。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2018/12/15 07:02

ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。
yokoyama_takuzo

2018/12/15 08:05

ありがとうございます。修正いたしました。
guest

回答1

0

ベストアンサー

もちろんです!
サンプル

HTML

1<p><span>□</span><span>□</span><span>□</span><span>□</span><span>□</span><span>□</span></p> 2<p class="flex"><span>□</span><span>□</span><span>□</span><span>□</span><span>□</span><span>□</span></p>

css

1p{ 2 width:2em; 3} 4.flex{ 5 display:flex; 6 flex-flow:wrap; 7}

質問が変更になったため追記

できますよ!
サンプル

html

1<div class="box-wrapper horizontal"> 2 <div class="box box1"></div> 3 <div class="box box2"></div> 4 <div class="box box3"></div> 5 <div class="box box4"></div> 6 <div class="box box5"></div> 7 <div class="box box6"></div> 8</div> 9<div class="box-wrapper pair"> 10 <div class="box box1"></div> 11 <div class="box box2"></div> 12 <div class="box box3"></div> 13 <div class="box box4"></div> 14 <div class="box box5"></div> 15 <div class="box box6"></div> 16</div> 17<div class="box-wrapper vertical"> 18 <div class="box box1"></div> 19 <div class="box box2"></div> 20 <div class="box box3"></div> 21 <div class="box box4"></div> 22 <div class="box box5"></div> 23 <div class="box box6"></div> 24</div>

css

1.box-wrapper { 2 display: flex; 3 width:100%; 4 flex-flow:wrap; 5} 6.horizontal{ 7 flex-flow:nowrap; 8} 9 10.box { 11 border: 1px solid black; 12 box-sizing: border-box; 13 width:100%; 14 height: 100px; 15} 16.vertical .box { 17 width: 100%; 18} 19.pair .box { 20 width: 50%; 21} 22

コメントを受けて追記

メディアクエリの例です。ウィンドウのサイズを変えてみてください。
サンプル

css

1.box-wrapper { 2 display: flex; 3 width:100%; 4} 5 6.box { 7 border: 1px solid black; 8 box-sizing: border-box; 9 width:100%; 10 height: 100px; 11} 12@media screen and (max-width: 768px){ 13 .box-wrapper { 14 flex-flow:wrap; 15 } 16 .box { 17 width: 50%; 18 } 19} 20@media screen and (max-width: 480px){ 21 .box { 22 width: 100%; 23 } 24}

投稿2018/12/15 07:37

編集2018/12/15 08:47
Lhankor_Mhy

総合スコア35865

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yokoyama_takuzo

2018/12/15 08:30

回答ありがとうございます! なるほど、HTMLファイルの方に3つ用意して画面サイズに合わせて表示するものをその都度変えていけばいいのですね? とても勉強になりました。 ありがとうございました!
Lhankor_Mhy

2018/12/15 08:33

いえ、HTMLはひとつで、CSSのメディアクエリを使う方がいいと思います。
yokoyama_takuzo

2018/12/15 08:39

なるほど!そういう事ですね! とてもありがたいです。 本当にありがとうございました。 とても助かりました! もう一度おさらいとして自分でもまた何度も試してみます
yokoyama_takuzo

2018/12/15 08:58

ありがとうございます! 完全に納得が出来ました! 本当に親切にありがとうございました。 これでまた明日から頑張れます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問