猫型iPS細胞研究所

この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。

====== flexbox ======

[[https://creive.me/archives/15427/|【CSS】Flexboxの使い方を徹底解説！基本から実践まで(サンプルあり)]]

<code html index.html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flexcontainer</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div id="makeImg"class="flexcontainer"/>
    <div class="flexitem item1">Item 1</div>
    <div class="flexitem item2">Item 2</div>
    <div class="flexitem item3">Item 3</div>
</body>
</html>
</code>

<code css style.css>
.flexcontainer{
  //display:flex;
}

.flexitem{
  width: 100%;
  height: 100px;
  text-align: center;
}
  .item1{
    background: #faa6a6;;
  }
   
  .item2{
    background: #8bbaff;
  }
   
  .item3{
    background: #f3ffbe;
  }
</code>

===== displayの指定なし =====
{{:css:pasted:20200921-164439.png}}


===== display:flex(flex-direction:row) =====
<code css style.css>
.flexcontainer{
  display:flex;
  flex-direction:row; // デフォルトrow
}
...
</code>
{{:css:pasted:20200921-164514.png}}

===== display:flex(flex-direction:column) =====
<code css style.css>
.flexcontainer{
  display:flex;
  flex-direction:column;
}
</code>
{{:css:pasted:20200921-165040.png}}


===== flex-wrap:wrap =====
<code css style.css>
.flexcontainer{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
}

.flexitem{
  width: 200px;
  height: 100px;
  text-al
}
{{:css:pasted:20200921-165711.png}}

猫型iPS細胞研究所

ユーザ用ツール

サイト用ツール

ページ用ツール