CSS

Flexboxを使ってみよう

header内の要素を横並びにするために、Flexboxを使う方法を見ていきます。

  • 余白の設定
  • Flexbox

親要素と子要素

・横並びにするには親要素と子要素の関係が必要で親要素に子要素を横に並べていくという感じになります。

・今回のような場合だと親要素であるcontainerにこれから作っていく子要素を横並びに貼り付けていく感じになります。

・まずは子要素を作っていかなくては行けないので、<div>タグを使ってまとめていきます。

Flexbox

・左側にはアイコンを右側には情報を配置していきたいのでまず左側のアイコンをHTMLの方で<div>タグで囲ってクラス名を.iconにします右側はリストのあとまでを囲ってクラス名を.infoとつけていきます。

・これで.containerの中に.iconと.infoがある状態になったのでCSSの方でスタイルを横並びにしていきます。flexboxという仕組みを使っていきます。

・まず親要素にdisplay: flex;と指定してあげます。中にある要素は横並びになってそれぞれの幅は内容に合わせられます。

・最後に.infoが.icon側にひっついているので.infoの左にmarginを指定してあげるといいでしょう。

ー広告ー

 

 






-CSS