要素の配置方法の設定をします。
| プロパティ | 値 | 意味 |
|---|---|---|
| position | static （既定値） | 配置方法を指定しない |
| relative | 通常表示される場所からの相対的な位置を配置 | |
| absolute | 上位要素の領域の端からの位置を指定 | |
| fixed | 指定法は absolute と同じ。但し、スクロールしても動かない。 |
要素の上下の位置を設定します。
| プロパティ | 値 | 意味 |
|---|---|---|
| top | 数値＋単位 | 上端からの表示位置を数値で設定 |
| 数値％ | 上端からの表示位置を上位要素の高さに対する割合で指定 | |
| auto （既定値） | 指定しない場合と同じ | |
| bottom | 数値＋単位 | 下端からの表示位置を数値で設定 |
| 数値％ | 下端からの表示位置を上位要素の高さに対する割合で指定 | |
| auto （既定値） | 指定しない場合と同じ |
要素の左右の位置を設定します。
| プロパティ | 値 | 意味 |
|---|---|---|
| left | 数値＋単位 | 左端からの表示位置を数値で設定 |
| 数値％ | 左端からの表示位置を上位要素の幅に対する割合で指定 | |
| auto （既定値） | 指定しない場合と同じ | |
| right | 数値＋単位 | 右端からの表示位置を数値で設定 |
| 数値％ | 右端からの表示位置を上位要素の幅に対する割合で指定 | |
| auto （既定値） | 指定しない場合と同じ |
位置の設定によっては、各要素が重なり合う場合がある、この重ね合わせの順番を指定することができます。
| プロパティ | 値 | 意味 |
|---|---|---|
| z-index | 数値 （整数） | ０を基準に、正の値が大きくなるほど前面に、負の数値が大きくなるほど背後に表示される。 |
| auto （既定値） | 記述順に重なっていく |
要素を表示するか、しないかを設定します。表示しない場合でもレイアウトには影響を与えます。
| プロパティ | 値 | 意味 |
|---|---|---|
| visivility | visible （整数） | 要素を表示する |
| hidden （既定値） | 要素を隠す |
対象となる領域に対して、文字の回り込みを指定する。
| プロパティ | 値 | 意味 |
|---|---|---|
| float | none （既定値） | 回り込まない |
| left | 領域が左に寄り、右側に文字が回り込む。 | |
| right | 領域が右に寄り、左側に文字が回り込む。 |
position プロパティが absolute の場合、float プロパティの設定は無効になります。
float プロパティによる文字の回り込みを解除します。
| プロパティ | 値 | 意味 |
|---|---|---|
| clear | none （既定値） | 回り込みを解除しない |
| left | 左側に文字が回り込むプロパティを解除（ float:left; の解除） | |
| right | 右側に文字が回り込むプロパティを解除（ float:right; の解除） | |
| both | 全ての回り込みを解除 |
表示する領域の大きさを指定し，内容の一部を切り抜いて表示します．
「position」プロパティで「absolute」属性が指定してある場合に有効となります．
| プロパティ | 値 | 意味 |
|---|---|---|
| clip | rect ( A B C D ) | 矩形領域として表示．「A，B，C，D」にはそれぞれ「上，右，下，左」の各辺の位置を左上の角を起点として「数値＋単位」で指定します． |
| auto | 元の内容と，同じ大きさ，同じ形で表示します． |
元の画像:
切り抜いた画像:
段組みを設定することが出来ます．
| プロパティ | 値 | 意味 |
|---|---|---|
| column-count | 整数 | 段の数を設定 |
| auto | 自動設定 | |
| column-width | 数値＋単位 | 段の幅を設定 |
| auto | 自動設定 | |
| columns | column-widthの値 column-countの値 | 段組みの数と幅をまとめて設定 |
| column-gap | 数値＋単位 | 段の間隔を設定 |
| normal | ブラウザの既定値 | |
| column-rule-style | none | 境界線を表示しない |
| hidden | 境界線を表示しない | |
| dotted | 境界線を点線で表示 | |
| dashed | 境界線を破線で表示 | |
| solid | 境界線を実線で表示 | |
| double | 境界線を二重線で表示 | |
| groove | 境界線を凹んだ線 | |
| ridge | 境界線を凸んだ線 | |
| inset | 内部が凹んだように見える境界線 | |
| outset | 内部が浮いたように見える境界線 | |
| column-rule-width | thin | 細い境界線 |
| medium | 中くらいの太さの境界線 | |
| thick | 太い境界線 | |
| 数値＋単位 | 境界線の太さを指定 | |
| column-rule-color | 色 | 境界線の色を指定 |
| column-rule | styleの値 widthの値 colorの値 | 境界線の設定をまとめてする |
フレキシブルボックスの指定をすると，その内部の要素の領域の大きさや配置を柔軟に変更できるようになります．
| プロパティ | 値 | 意味 |
|---|---|---|
| display | flex | 設定した要素をブロックレベル（領域単位）のフレキシブルボックスにする． |
| inline-flex | 設定した要素をインラインレベル（文字単位）のフレキシブルボックスにする． |
| プロパティ | 値 | 意味 |
|---|---|---|
| min-width | auto | 横幅の最小値 |
| min-height | auto | 高さの最小値 |
| プロパティ | 値 | 意味 |
|---|---|---|
| flex-direction | row | 領域内の要素の配列方向を左から右にする． |
| rwo-reverse | 領域内の要素の配列方向を右から左にする． | |
| column | 領域内の要素の配列方向を上から下にする． | |
| column-reverse | 領域内の要素の配列方向を下から上にする． | |
| flex-wrap | nowrap | 領域内の要素を一列に並べる |
| wrap | 領域内の要素を複数列に並べる | |
| wrap-reverse | 領域内の要素を逆並びの複数列にする | |
| flex-flow | (flex-directionの値)(flex-wrapの値) | flex-directionとflex-wrapを一度に設定 |
| order | 数値 | 並べる順番を指定 |
| プロパティ | 値 | 意味 |
|---|---|---|
| flex-basis | 数値＋単位 | 要素の基本的な大きさを設定する |
| flex-grow | 数値 | 要素を状況に合わせて広げる時の比率を設定 |
| cflex-shrink | 数値 | 要素を状況に合わせて縮める時の比率を設定 |
| flex | none | 要素の大きさを状況に合わせて変更しない |
| (flex-growの値)(flex-shrinkの値)|(flex-basisの値) | 要素の大きさの変更に対する柔軟さをまとめて設定 |
| プロパティ | 値 | 意味 |
|---|---|---|
| justify-content | flex-start | 一列の要素を，横配列の場合は左詰めに，縦配列の場合は上から詰めて並べる． |
| flex-end | 一列の要素を，横配列の場合は右詰めに，縦配列の場合は下から詰めて並べる． | |
| center | 一列の要素を，横配列の場合は横中央に，縦配列の場合は縦中央に並べる． | |
| space-between | 最初の要素はflex-startと同様に，最後の要素はflex-endと同様に置き，残りはその間に等間隔で並べる | |
| space-around | space-betweenと同様に並べるが，最初と最後の要素を領域の境界から他の要素の間隔の半分だけ開ける | |
| align-items | flex-start | 一列の要素を，横配列の場合は領域の上辺に，縦配列の場合は領域の左辺に揃える． |
| flex-end | 一列の要素を，横配列の場合は領域の下辺に，縦配列の場合は領域の右辺に揃える． | |
| center | 一列の要素を，横配列の場合は横中央に，縦配列の場合は縦中央に揃える． | |
| baseline | 一列の要素を，横配列の場合，要素内の文字のベースラインを合わせるように並べる． | |
| stretch | 一列の要素を，要素が領域内に隙間なく納まるように並べる | |
| align-self | flex-start | align-itemの場合と同じ |
| flex-end | align-itemの場合と同じ | |
| center | align-itemの場合と同じ | |
| baseline | align-itemの場合と同じ | |
| stretch | align-itemの場合と同じ | |
| auto | 親要素のalign-itemに合わせる．親がなければstretchにする |
| プロパティ | 値 | 意味 |
|---|---|---|
| align-content | flex-start | 要素の複数列を，横配列の場合は領域の上辺に，縦配列の場合は領域の左辺に揃える． |
| flex-end | 要素の複数列を，横配列の場合は領域の下辺に，縦配列の場合は領域の右辺に揃える． | |
| center | 要素の複数列を，横配列の場合は横中央に，縦配列の場合は縦中央に揃える． | |
| space-between | 要素の複数列で，要素の最初の列はflex-startと同様に，最後の列はflex-endと同様に揃え，残りの列はその間に等間隔で配列する． | |
| space-around | 要素の複数列で，最初の列と最後の列を，横配列の場合は上下の辺，縦配列の場合は左右の辺から残りの列の配列間隔の半分だけ開けて揃える． | |
| stretch | 要素の複数列を，隙間ができないように揃えて配列． |