CSS Grid と flexbox で iOSの電卓画面を再現する記事を見つけました
電卓の機能はついていません
原文は こちらです
早々に試してみました
現在対応しているブラウザは Safari 10.1, Firefox 52, Opera 44, Chrome 57 です
htmlを用意する
<div class="wrapper"> <h1>0</h1> <div class="digits flex"> <button>9</button> <button>8</button> <button>7</button> <button>6</button> <button>5</button> <button>4</button> <button>3</button> <button>2</button> <button>1</button> <button class="wide">0</button> <button>.</button> </div> <div class="modifiers subgrid"> <button>AC</button> <button>+/-</button> <button>%</button> </div> <div class="operations subgrid"> <button>/</button> <button>X</button> <button>-</button> <button>+</button> <button>=</button> </div> </div>
戻る
最初のCSSを適用する
Reset
0
// CSS body { font-family: sans-serif; } .wrapper { min-height: 65vh; /* viewport height の 65% */ } h1 { background-color: #111; color: white; margin: 0; padding: 1rem; font-size: 4rem; } button { font-size: 2rem; border: 1px solid #111; } .modifiers button { background-color: #ccc; } .operations button { background-color: orange; } .digits button{ background-color: #efefef; }
// CSS .wrapper, .subgrid { display: grid; }
display: grid
要素をグリッドのコンテナとして定義し、グリッド・フォーマットを利用できるようにします
// CSS .wrapper { grid-template-areas: "total total total total" "modif modif modif oper" "digit digit digit oper" "digit digit digit oper" "digit digit digit oper" "digit digit digit oper"; } h1 { grid-area: total; } .modifiers { grid-area: modif; } .operations { grid-area: oper; } .digits { grid-area: digit; }grid-template-areas
grid-area プロパティの値 (grid-area 名)をもとに gridの形を定義します</br> grid-area 名を繰り返すことで、それらのセルにまたがった内容を置くことができる</br> 6行4列のグリッドが構成されます
// CSS h1 { display: flex; justify-content: flex-end; align-items: flex-end; }display: flex;
要素を flexbox コンテナとして定義します
justify-content: flex-end;横配置の場合、右揃えにする
align-items: flex-end;横配置の場合、下揃えにする
// CSS .modifiers { grid-auto-flow: column; }grid-auto-flow: column;
グリッドの子要素の配置を明示しないときに、自動配置アルゴリズムでの配置方法を指定します</br> 置くことのできる列の要素に順番に配置していきます
// CSS .modifiers { grid-auto-columns: 1fr; }grid-auto-columns: 1fr;
自動で配置された列の長さを指定します</br> fr (fraction) 単位は、グリッドの空きスペースを分割した長さを表します</br> ここでは .modifiers の3列を3等分の長さに指定しています
// CSS .digits { display: flex; }
// CSS .digits button { flex: 1 0 30%; /* flex-grow: 1; flex-shrink: 0; flex-basis: 30%; */ }
// CSS .digits { flex-wrap: wrap; }flex-wrap: wrap;
子要素の折り返しを設定する
// CSS .digits { flex-direction: row-reverse; }flex-direction: row-reverse;
子要素の配置を行方向で右から左に設定する
// CSS .digits .wide { flex: 2 0 60%; /* flex-grow: 2; flex-shrink: 0; flex-basis: 60%; */ }
// CSS .digits .wide { order: 1; }order: 1;
表示順を指定します。1番目に指定しています。 あくまで見かけ上だけです。プログラミングの際は注意!
// CSS .wrapper { grid-auto-columns: 1fr; }
// CSS body { font-family: sans-serif; } h1 { background-color: #111; color: white; margin: 0; padding: 1rem; font-size: 4rem; display: flex; justify-content: flex-end; align-items: flex-end; } button { font-size: 2rem; border: 1px solid #111; } .modifiers button { background-color: #ccc; } .operations button { background-color: orange; } .digits button{ background-color: #efefef; } .wrapper, .subgrid { display: grid; } .wrapper { min-height: 65vh; /* viewport height の 65% */ grid-template-areas: "total total total total" "modif modif modif oper" "digit digit digit oper" "digit digit digit oper" "digit digit digit oper" "digit digit digit oper"; grid-auto-columns: 1fr; } h1 { grid-area: total; } .modifiers { grid-area: modif; } .operations { grid-area: oper; } .digits { grid-area: digit; } .modifiers { grid-auto-flow: column; grid-auto-columns: 1fr; } .digits { display: flex; flex-wrap: wrap; flex-direction: row-reverse; } .digits button { flex: 1 0 30%; /* flex-grow: 1; flex-shrink: 0; flex-basis: 30%; */ } .digits .wide { flex: 2 0 60%; /* flex-grow: 2; flex-shrink: 0; flex-basis: 60%; */ order: 1; }