★flex
3つのレイアウト手法 floatレイアウト flexboxレイアウト gridレイアウト float レイアウトの問題点 横並びにしたブロックの高さを揃えられない 横並びにしたブロックは上揃えにしかならない 幅の計算があわないとカラム落ちする float解除の仕組みが分かり…
flexプロパティ flexプロパティは以下の3つのプロパティのショートハンドです（flex-shrinkとflex-basisは省略可） flex-grow flex-shrink flex-basis 初期値（initial）は、flex: 0 1 auto flex-grow flex-growは数値を1にすれば全て均等に、また指定した数…
Flexboxでナビゲーション 便宜上、複数のナビゲーションをnav要素で繰返し設定します class名は「共通名」と「個別名」を付けて、設定を分けて指定します <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>Global Menu</title> <style> /* ------------------------------------ reset -----------------------…</meta></meta></head></html>
Flexboxで横並び- リキッドレイアウト flex: 1; flexプロパティは、flex-grow、flex-shrink、flex-basisの3つのプロパティのショートハンド（省略形） flex-growプロパティ flex-growの値は整数値のみで、flexアイテムが伸びる比率を指定します flex-growは…
Flexboxで横並び <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>Flexboxで横並び</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="wrapper"> <div class="box"> <img src="img/01.jpg" alt=""> <p>左の画像の説明</p> <…</div></div></body></html>
flexboxで横並び シンプルな横並び 幅の計算は、box-sizing: border-box; を前提にする 親要素にpaddingがついている場合 <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>flexboxで横並び</title> </meta></meta></meta></head></html>
Flexboxアイテムで指定できるプロパティ order：並び順 .itemA{ order: 4; } .itemB{ order: 1; } .itemC{ order: 3; } .itemD{ order: 2; } flex-grow：伸び率 flexコンテナーの幅に余りがある場合にflexアイテムの伸び率を他のflexアイテムとの相対値（整…
justify-content：水平方向の位置 justify-content: flex-start（デフォルト） .container { display: flex; justify-content: flex-start; } justify-content: flex-end .container { display: flex; justify-content: flex-end; } justify-content: center…
Flexboxとは CSS3 Flexible Box (可変ボックス) CSS Flexible Box Layout Module Level 1 ボックスのレイアウト方法を定めるCSSの機能 ボックスを任意の方向にレイアウトしたり、ボックスの大きさを伸縮可能（flex）にするもの flex：融通のきく、柔軟なとい…
