★Flexbox

中央に配置

中央に配置 Grid Flexbox position Gridで中央配置 display: grid; place-items: center; 「place-items: center;」は「align-items: center;」「justify-items: center;」をまとめている <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>Document</title> </meta></meta></head></html>

ナビゲーションの作り方

ナビゲーションの種類(PC版) ボタン形式(面) ロゴとナビゲーションを横に並ぶ ボタン形式(面) <html lang="ja"> <head> <meta charset="UTF-8"> <title>SHELLY’S</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <header class="header"> <h1 class="logo"><a href="#"></a></h1></header></div></body></html>

Flexboxで横並び - 写真と文字

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で横並び

Flexboxで横並び シンプルな横並び 幅の計算は、box-sizing: border-box; を前提にする 親要素にpaddingがついている場合 <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>flexboxで横並び</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <…</body></html>

Flexboxアイテムで指定できるプロパティ

Flexboxアイテムで指定できるプロパティ order:並び順 .itemA{ order: 4; } .itemB{ order: 1; } .itemC{ order: 3; } .itemD{ order: 2; } flex-grow:伸び率 flexコンテナーの幅に余りがある場合にflexアイテムの伸び率を他のflexアイテムとの相対値(整…

justify-content:水平方向の位置

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とは

Flexboxとは CSS3 Flexible Box (可変ボックス) CSS Flexible Box Layout Module Level 1 ボックスのレイアウト方法を定めるCSSの機能 ボックスを任意の方向にレイアウトしたり、ボックスの大きさを伸縮可能(flex)にするもの flex:融通のきく、柔軟なとい…

Flexbox

Flexbox 「display: flex;」で、要素を横並びにできます 「リストや画像を横並びにしたい」 「要素間の余白を均等にして、はみ出たら折り返したい」 「表示する順番を逆からにしたい」 「画像とテキストを左右交互に配置したい」 Flexboxの性質 以下の性質が…