前回、Flexboxの基本編をご紹介しました。 今回は実装結果を見ていきましょう。
目次
See the Pen Flexbox(flexコンテナ) by Uchaaan (@Uchaaan) on CodePen.
あえてFlexboxで作ってみました。
See the Pen ヘッダー(Flexbox) by Uchaaan (@Uchaaan) on CodePen.
よくある横並びです。 文章量が違うけど、ボタンは下配置で、横と合わせて欲しい。 そんな要望もFlexboxだと簡単です。
See the Pen 横並びのBOX(ボタンを下に揃えて配置:Flexbox) by Uchaaan (@Uchaaan) on CodePen.
こちらもよくある画像とテキストを交互に配置するレイアウトです。 See the Pen 画像とテキストの横並びレイアウト by Uchaaan (@Uchaaan) on CodePen.
いかがでしたでしょうか。 よく使うFlexboxのご紹介でした。
≪ 前の記事へ
次の記事へ ≫
2022.07.28
【CSS】上下左右からスライドインするアニメーション
2022.11.10
【HTML】引用タグの使い方(blockquote、q、cite)
2022.07.06
【jQuery】チェックボックスの選択数を制限する方法
2022.07.21
【CSS】要素がゆらゆらと揺れるアニメーション(animation、transform、keyframes)
2022.06.22
【CSS】要素の内側に線を引く方法(疑似要素after、outline-offset、box-sizing)
猫田 ねこ
パチンコ店勤務からweb制作会社へ転職という異色の経歴。漫画大好き。アニメ大好き。パチンコ大好きな、ねこです。
利用規約 お問い合わせ