柔軟な表示を可能にする要素「display: flex;」
エレメントに「display: flex;」というプロパティを配置すると、
柔軟なウェブページにできる様々なの機能を使えるようになる。
縦に配置するか横に配置するかを指定する要素「flex-direction」
“親要素”に「display: flex;」、「flex-direction:(値)」を指定すると、
その“子要素”にflex-directionを行配置または列配置にできる。
文書内の要素の配置を揃える「justify-content」「align-items」
拡大する・縮小する・基準を決める「flexプロパティ」
flex: (拡大率), (縮小率), (サイズの基準);
flexにある要素は、それぞれflex-grow, flex-shrink, flex-basisとして指定できる。
i.e.)
#(なにかしらのCSS要素) {
flex-grow: 1;
/*拡大係数(相対的な倍率)を1に指定する*/
}
順序を指定するorder
デフォルトでは先に表記した要素が先に表示されるが、
orderの番号を指定することで、番号の若い順に要素を表示させることができる。
要素の配置を個別に指定する「align-self」
プロパティ「align-self」は、Aを中央揃え、Bを右揃えというふうに、配置を要素ごとに指定できる。
↧