IT工房|AI入門とWebの勉強サイトIT工房ABOUTBLOGSample置き場CONTACTHomelectureHTML&CSSFlexBoxの使い方(1)〜display:flexについてFlexBoxの使い方(1)〜display:flexについて通常フローしたブロック要素を横並びにするにはこれまでfloatプロパティを使用していましたが、その挙動は難しくて入門者を困らせる関門でした。CSS3で定義されたFlexBoxの仕組みを使うと簡単に横並びのレイアウトが出来上がります。今までできなかったこともうまく解決できるようになりました。簡単に横並びのレイアウトを作成してみましょう。上のような通常フローを下のような横並びのレイアウトに変えるにはflexレイアウトを使うと簡単です。20px;}.column:last-child{margin-right:0;}作成手順flexコンテナにdisplay:flexを記述するだけで横並びレイアウトが出来上がります。それだけでOK!!簡単なのです。flexレイアウトを使うためには、「flexコンテナ」と「flexアイテム」2つの用語を覚えましょう。「display:flex」と記述することから始まります。flexを使用して縦並びを明示的に指定するには「flex-direction:column」のプロパティと値を使用します。column;DogRoboの毎日の仕事といえばブロック積みをすること。ブリキ製のロボットにとって単純作業はお手のものだ。それはブロックを空中で横並びにする作業だった。それは、ブロックを浮遊状態にしてから並べる必要があるからだ。デザイナー諸君に聞いてもらいたい。Webの世界とはいえ、現実の物理の法則に従ったデザインを心がけて欲しい。ブロックを空中で横並びにするとは物理の法則を逸脱した行為なのだから..そんなことをブツブツ言いながら作業をするのだった。LayoutSNSで共有しましょう。