CSS3 ボックス learning_html/css_WEB-ITnose

CSS3 が提供するボックス スタイルは、ボックス内の要素の柔軟なレイアウトを実現できます。ブロック要素を水平に配置するために float や display: inline を使用したり (box-orient で実行できます)、計算する必要はありません。各ブロックの幅またはパーセンテージを指定して均等な配分を実現します (box-flex で実行できます)。だから、大胆に使ってください、お嬢さん。親要素にdisplay:boxを設定すると、内部のブロックレベルの子要素を配置することができます。このとき、内部要素はinline要素の配置に合わせて配置されますが、幅と高さは設定できます。親ボックスには次のスタイルを使用します。

1.box-orient

は、内部子要素の配置を指定します。具体的には、

vertical

horizo​​ntal

inline-axis

block-axis

2.box-align

は、内部の子要素の垂直方向の配置を指定します。

center: 親ボックスの垂直方向の中央に配置

start: 親要素の上から配置

end: 親要素の下部に位置合わせ

stretch: 垂直親要素全体を埋めるように引き伸ばします

baseline

3.box-pack

水平方向の整列
start: 左揃え
center: 子要素の水平方向の中央揃えを実現します
justify: 両端を揃えます
end : 右揃え

注: box-align および box-pack 配置の説明は、box-orient の設定に関連しています。

4.box-direction

サブボックスの配置順序。

5.box-sizing

ボックスのどの部分が幅設定に含まれるか:

content-box: width=コンテンツエリア

border-box: width=コンテンツエリア+パディング+ボーダー

6.box -flex

この属性は、親要素の残りの幅と高さを割り当てるために子要素に設定する必要があります (垂直配置に設定されている場合)。この属性の設定は、display: ボックスを持つように親要素によって設定する必要があります。
残りの幅の理解:

親コンテナの幅 - 子コンテナの固定幅(優先) / 子コンテナのコンテンツ幅 - 子コンテナのmargin&border&padding

著作権表示: この記事はブロガーによるオリジナル記事であり、無断で転載することはできません。ブロガーの許可。