ここから本文です

flexboxで添付画像のようなことはできますか?

アバター

ID非公開さん

2017/5/816:07:19

flexboxで添付画像のようなことはできますか?

こちら(https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q111729770...)を参考にしてみたんですがうまくいきません。

図のように画面が縦長になったら
アイテムが縦に並ぶように、
なおかつ4が一番下にくるようにしたいのですが
どうすれば良いでしょうか?

宜しくお願いいたします。

補足それぞれのアイテムの中には画像や文字を配置しますが、
それぞれ天地左右中央にくるようにしたいのですができますでしょうか。

lan_atycbさんのご回答はすべてサイズの決まった画像だったのでできたのですが、
画像の変わりにpxで<div>要素のサイズを決めてしまったら
縮めてもサイズが変わってくれないですよね?

flexbox,yoshinekoneko,アイテム,添付画像,media screen,2 3 5 6 7,画面

閲覧数:
84
回答数:
3
お礼:
100枚

違反報告

ベストアンサーに選ばれた回答

[LAN]さん

2017/5/914:25:02

https://thimbleprojects.org/lan-atycb/267051/

{1},{2,3,5,6,7,8},{4}

分けて作りました。

Remixボタンを押すとソースが編集できますので、いろいろ試してみてください

https://thimbleprojects.org/lan-atycb/267051/...

  • アバター

    質問者

    ID非公開さん

    2017/5/920:04:38

    ご回答ありがとうございます。
    貴重なお時間を割いていただき感謝です。

    ただ、IE・Chromeだとバッチリなのですが、
    なぜかFirefoxだと4が1の下半分くらいまで重なっていて、
    4の下がその分隙間ができているのですが
    これはどうしたらいいでしょうか?

    また、幅を縮めると1の下と7・8の下にスペースができて、
    4は1の右隣に並んでしまいます。

    すみません、もし原因がわかりましたら教えて頂けますでしょうか。

  • その他の返信を表示

返信を取り消しますが
よろしいですか?

  • 取り消す
  • キャンセル

アバター

質問した人からのコメント

2017/5/15 02:47:57

貴重なお時間を割いていただきありがとうございました!
感謝、感謝です。(^ ^)

ベストアンサー以外の回答

1〜2件/2件中

並び替え:回答日時の
新しい順
|古い順

gar********さん

2017/5/912:43:29

順番が入れ替わるのはメディアクエリと order で指定することになるかと思います。

@media screen and (max-width: 767px) {
#container {
display: flex;
……
}
#box1 {
order: 1;
……
}
~~~
#box4 {
order: 8;
……
}
#box5 {
order: 4;
……
}
~~~
}

返信を取り消しますが
よろしいですか?

  • 取り消す
  • キャンセル

por********さん

2017/5/821:14:50

>yoshinekonekoさん2017/5/816:07:19
>flexboxで添付画像のようなことはできますか?

flexboxはソース配布なので可能です。

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる