こんばんは、こずえです。
プログラミング学習記録18日目です。
Flexboxについて学習しました。
所感：わかりそうでわからない…色々試していると時間があっという間に過ぎますね。
合計学習時間
前回までの時間：25.00[h]
今回の時間：2.25[h]
合計時間：27.25[h]
学習内容
Flexbox
今まで観てきたのと同様にソースを変更→表示の形で解説されているので動画を追う形で学習できました。
CSS3 入門 レッスン66 flexbox – チュートリアル道場
上記動画を観てから以下の記事を読みました。
図が多いのでイメージが付きやすいです。
CSS Flexboxのチートシートを作ったので配布します – Webクリエイターボックス
flexboxの動きを確認
色々とデベロッパーツールで設定を変えてみたりしました。
まだ理解が曖昧なところがたくさんありますが、以下に例を2つのせます。
flexboxの動きの確認1
flexboxの動きの確認2
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSSの練習</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">
<div id="div1">1</div>
<div id="div2">2</div>
<div id="div3">3</div>
<div id="div4">4</div>
<div id="div5">5</div>
<div id="div6">6</div>
<div id="div7">7</div>
<div id="div8">8</div>
<div id="div9">9</div>
<div id="div10">10</div>
</div>
</body>
</html>
CSS
/*子要素*/
#div1, #div2, #div3, #div4, #div5, #div6, #div7, #div8, #div9, #div10 {
width: 100px;
height: 100px;
font-size: 400%;
border: solid;
flex: 1 0 20%;
}
/*親要素*/
#container {
width: 98%;
height: 400px;
background-color: papayawhip;
display: flex;
/*---flex-direction---*/
/*横方向 デフォルト*/
flex-direction: row;
/*横方向(逆)*/
/*flex-direction: row-reverse;*/
/*縦方向*/
/*flex-direction: column;*/
/*縦方向(逆)*/
/*flex-direction: column-reverse;*/
/*---flex-wrap---*/
/*折り返しなし デフォルト*/
/*flex-wrap: nowrap;*/
/*折り返しあり*/
flex-wrap: wrap;
/*折り返しあり(逆方向)*/
/*flex-wrap: wrap-reverse;*/
/*---複数行にした時の揃え---*/
align-content: space-around;
/*align-content: flex-start;*/
}
隙間時間で以下の記事を読みたいと思っています。