CSS3 ボックス learning_html/css_WEB-ITnose

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

1.box-orient

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

2.box-align

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

3.box-pack

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

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

4.box-direction

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

5.box-sizing

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

6.box -flex

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

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

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