見出し画像

ホームページを作ろう！ CSS - flexbox 1

donguri

CSS flexboxの各プロパティを見る前に、flexboxとはどんなものか説明します。flexboxを使ったレイアウトとは、flexアイテムと呼ばれる複数の子要素を内包するflexコンテナの親要素で構成されています。

便利な flexboxを使ってレイアウトしてます。JS Binを使ってやってます。

単純なモデルから

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>flexTest/title>
</head>
<body>

<div class="fl">
   <div class="b1"></div>
   <div class="b2"></div>
   <div class="b3"></div>
   <div class="b4"></div>
   <div class="b5"></div>
</div>

</body>
</html>

基本の構造にclassをつけています。このclassを指定してレイアウトをします。まず、四角を表示させます。

.b1{
    height: 100px;
    width: 100px;
    background-color:blue;
  　border:solid 1px white;
}

.b2{
    height: 100px;
    width: 100px;
    background-color:blue;
  　 border:solid 1px white;

}

.b3{
    height: 100px;
    width: 100px;
    background-color:blue;
    border:solid 1px white;
}

.b4{
    height: 100px;
    width: 100px;
    background-color:blue;
    border:solid 1px white;
}

.b5{
    height: 100px;
    width: 100px;
    background-color:blue;
    border:solid 1px white;
}

とすると以下の通り縦に並びます。

flexboxを使います。親要素"class="fl"にflexを適応させます。

.fl{
  display: flex;
}

横並びになります。

親要素に"flex"を適応させるだけで子要素全てに適応されます。横並びにするだけであれば子要素、個別に

.b1{
　　display: inline-block;
　　height: 100px;
　　width: 100px;
　　background-color:blue;
　　border:solid 1px white;
}

が使えます。

flexboxは親要素一括で指定。inline-blockは個別で指定します。どんなところに使いたいか部分的か、全体一括かで使い分けができます。

この記事が気に入ったらサポートをしてみませんか？