Module)という機能を使い、ブロックコンテンツを横並びにしていく方法をご紹介します。Flexboxを使えば、floatやcleafixといったテクニックを使うよりも簡単に要素を横並びにすることが出来ます。今回は初めの一歩としてFlexboxの初歩的な使い方を記します。横並びにする前の状態containerというクラスが付けられた親要素の中身に3つのpタグが子要素として入っている。ブロックコンテンツは通常、このように親要素の領域に目一杯広がる。{background-color:aquamarine;}.osaka{background-color:skyblue;}</style>上記のスタイルのcontainerクラスに対してdisplayプロパティを書き加え、値をflexとする。-</style>子要素が横並びになった。display:flexとすることで親要素と内包する子要素がFlexboxコンテンツ化する。その際、親要素と子要素はそれぞれフレックスコンテナ(親要素)フレックスアイテム(子要素)という扱いとなる。ブロックコンテンツと異なり、子要素の横幅はそれぞれの内容量で決まり、親要素に余剰スペースがある場合はそのまま余白となる。子要素に対してflexプロパティを指定する。全ての子要素の※flexプロパティをflex:1として親要素内の余白を同じ比率で埋める。{background-color:aquamarine;flex:1;}.osaka{background-color:skyblue;flex:1;}子要素が均一に広がり、余白を埋める事が出来た。※flexプロパティには伸長比(flex-grow)、縮小比(flex-shrink)、ベースサイズ(flex-basis)を指定する事が出来る。今回はプロパティに一つだけ値を設定し、伸長比率(flex-grow)のみを設定しています。その他のプロパティの使い方などは次回以降のFlexboxについての記事で紹介したいと思います。【photoshop】カスタムシェイプツールの図形・アイコンを利用する2018年11月18日liタグのスタイルをショートハンドで記述する。対して1件のコメントがあります。【Flexbox】flex-directionでアイテムの並びの向きと方向を変える。【Flexbox】flex-directionでアイテムの並びの向きと方向を変える。Linesこの投稿はコメントできません。