Labo 227: チャット型のデザイン ① ... ボックスを 2つ並べる
Labo 227: チャット型のデザイン ① ... ボックスを 2つ並べる
会話形式のテキストを効果的に表示するモジュールの作成（その一からその三まで）
チャットアプリの画面に似せた表現を実現する
その一とその二では、2つのボックスを橫に並べる フレックスボックスの基本を知る
チャットアプリの画面に似せたデザインを作成する
まず、2つのボックスを橫に並べる
ボックスを橫に並べるために、CSS のフレックスボックスを使う
CSS では、HTML の親要素に display: flex; を適用する
そうすると子要素がすべて横一列に並ぶようになる
フレックスボックスを使ったえ複数のボックスを横一列に並べる基本
フレックスボックスは、display: flex; を適用した要素の子要素を橫または縦一列に並べる機能
初期設定では、子要素は左揃えで横一列に並ぶ
このとき、各子要素の幅はそれぞれのコンテンツが収まる長さに縮小する
display: flex;
<div class="chat-1st"> ～ </div> に display: flex; を適用する
そうすると直接の子要素がすべて、フレックスモードで配置されるようになる
フレックスボックスによってどのように子要素が配置されるか
初期設定では、親要素の幅が十分に広く、子要素を横一列に並べてもまだ余裕があるとき、子要素の幅は自身のコンテンツが収まる幅に縮小する ... ベース幅という
幅が縮小すると同時に、橫にならぶ子要素の高さが揃う
子要素が多くなったり、子要素のコンテンツが増えたりして親要素の幅が足りなくなると、子要素の幅が縮小する
子要素が縮小しきれなくなっても横一列に並び、親要素からはみ出す
こうした配列の動作は、各種プロパティを使ってカスタマイズすることができる
親要素の幅に余裕があるとき、子要素を伸長する設定にできる
逆に伸長も縮小もしないようにしたり、固定幅にしたりすることもできる
ベース幅を設定したり、子要素によって伸縮する割合を変更することも可能
フレックスボックスは初期設定では横一列に並ぶようになっているが、縦に並べることもできる
レスポンシブデザインを実現をするために、並ぶ方向の切り替えはよく行う
行揃えの変更ができる
初期設定では左揃えになっているが、右揃え、均等配置にできる
親要素からはみ出るときは改行する設定にできる
縦方向の整列のしかたを調整できる
初期設定では子要素の高さが揃うが、高さを揃えずに上端揃え、下端揃えなどにもできる