見出し画像

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

donguri

カードタイプのレイアウトで表示させます。

で試していきます。

基本のHTML、CSSは

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=He, initial-scale=1.0">
  <title>Flex</title>
  <style>
    body {
      font-family: sans-serif;
    }
　　</style>
</head>

<body>
  <div class="wrap">
    <div class="item">
      <img src="train.jpeg">
      <h2>Flexboxでレイアウト</h2>
      <p>Flexboxでレイアウト。簡単に設置できて便利</p>
    </div>

   <div class="item">
      <img src="train.jpeg">
      <h2>Flexboxでレイアウトト</h2>
      <p>Flexboxでレイアウト。簡単に設置できて便利</p>
    </div>
 </div>
</body>
</html>

として表示させてみます。

縦に配置されます。<div>で囲われた上位の親要素は

<div class="wrap">

wrapとクラス名をつけています。その下子要素は

<div class="item">

itemとクラス名をつけています。

これらのクラス名を指定してレイアウトしていきます。まず子要素

  .item {
      padding: 10px;
      margin: 10px;
      width: 300px;
      background-color: red;
      color:white;
    }

として表示させます。

と縦に並んで表示されます。横に並ばせたいので親要素を

     .wrap {
      display: flex;
      flex-wrap: wrap;
    }

としてやると横並びになります。親要素に指定して一括で横並びにできます。

flexboxができる以前から使われている横並びの方法について整理しておきます。

子要素、この場合だと"item"に

display: inline-block;

または

float: left;

でも横並びにはなります。

ブラウザの幅を変化させて試してみるとわかりやすいと思います。

次に上の画像と表題を横並びにしてその下に説明文のような形、以下のような感じにします。

横並びにしたい部分に新しく <div class="ti"><div>を設置します。

  <div class="ti">
        <img src="train.jpeg">
        <h2>Flexboxでレイアウト</h2>
  </div>

CSSを設置します。

  .ti {
      display: flex;
    }

    .ti h2 {
      padding-left: 20px;
    }



参考サイトです。


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