0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

scssでの折り返しについて

Posted at

#最初に
出品機能を実装中、プレビュー画像をlabel-boxと横並びにしたかった。
57eb6db53b4f420228aa7e8d2a956573.png

#原因
flex-wrap: wrap;で折り返されていた...
flex-wrap: nowrap;に変更。単一行に押し込むという形で横並びにすることが出来ました。
330fc64d44bf614fb469022224960558.png

#flex-wrapプロパティについて
フレックスアイテムを単一行に押し込むか、あるいは複数行に折り返してもよいかを指定するプロパティ。
横並び!横並び!と考え方が凝り固まっていました。
横並びの方法はfloatやinline-blockしか思い当たらず参考アプリの検証ツールで原因に気づくことが出来ました。
思いがけない自分の記述で手間取ってしまったので、コードを修正するときは広い視野を意識していきます。

#参考サイト
https://developer.mozilla.org/ja/docs/Web/CSS/flex-wrap

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?