表示: -webkit-box-inline 我见_html/css_WEB-ITnose

発見:

私は最近、モバイル フレキシブル ボックス レイアウトに取り組んでいますが、この属性とその使用法を偶然発見しました。ネット上ではほとんど情報が見つかりません（個人の意見です）。 (display:box) について聞いたことがない場合は、他の人のブログにアクセスして CSS3 を参照することをお勧めします。この言葉から、display:inline という属性を思い浮かべることができますか。わかりませんが、読んでみてください。私の前回のエッセイを見て、その前に -webkit- を追加した理由は、box-inline をインライン ボックスとして解釈する人が多すぎるためです。

コンセプト:

まず、display:box-inline は、display:inline 機能と display:box 機能の組み合わせとして考えることができます。これは、ボックス内にあるもののみを表示し、display: の一連のプロパティを使用できます。ボックス。

例:

まずはコードから始めましょう:

1

2 * {
3 余白: 0;
5 }
6 .content{
7背景-color : #ddd;
8 }
9
10 .content1{
11 背景色: #0f0;
12 }
13
14 .content2{
15背景色: #0000ff; content{
19 - webkit-box-orient: 水平;
25 }
26
27 .content .content2,
28 .content .content1{
29 -webkit-box-flex: 1;
31
32 .content1{ 33幅37＆gt; />商品紹介 div >
41 div >
42 body >


実行後、content1 ボックスに幅が設定されていることがわかりますが、理由は、-webkit-box-flex: 1 です。これは、左右のボックスのサイズを補うためです。「この機能を維持したい場合は、content1 を変更するだけで十分です。」単にdisplay: inline-blockを追加するだけですか？ 「

理由
」

しかし、私が言いたいのは、中のテキストを垂直方向の中央に配置したい場合はどうすればよいかということです。 方法があるとおっしゃいましたし、私も方法はあると思いますが、中身が写真だった場合はどうなるでしょうか?画像を垂直方向の中央に配置したいが、同時に歪んだくない場合はどうすればよいでしょうか?ある程度の努力が必要ですか？ 「左に写真、右に商品タイトル、下に商品紹介」といった需要は必ずありますが、ここでまず思いつくのは箱の中身の​​要素です。この時点では、コンテンツは確かに垂直方向に中央揃えになっていましたが、幅はまだ中央揃えになっていなかったことがわかりました。変化。

この時点で、content1 のボックスを -webkit-box-inline に変更してみてください。

1 ボックスのサイズが 40px になります

2 ボックス内のテキストも縦書きになります。中央揃え

3 .インライン機能を備えたボックスは実際にそのサイズを変更できます

ここでもう一度まとめてみましょう。独自のサイズを変更できるという第一印象は、ボックスのコンテンツのみが inline-block である必要があります。現時点では、この機能を使用している人があまりいないことに驚かずにはいられませんでした。ここでそれをまとめておきます。

display : -webkit-box-inline

には次の機能があります:

1. はdisplay:inline-blockの機能があります: オブジェクトはインラインオブジェクトとしてレンダリングされますが、オブジェクトのコンテンツはブロックとしてレンダリングされますオブジェクト、その隣にインライン オブジェクトは同じ行にレンダリングされます。スペースは許可されます。 私の大雑把な説明では、ボックスは初期化時に子要素のサイズのみを収容でき、ボックス自体のサイズは変更できます。
2. display:box 属性があり、CSS3 の機能が利用できます

個人的には、この属性はうまく使えば非常に便利だと思います。

最終的なサンプルコード:

1
2
3
4
5
6 タイトル >
7 8 * {
9 パディング: 0;
10 マージン: 0;
11 }
12 .content{
13 背景色: #ddd;
14 }
15
16 .content1{
17 背景色: #0f0;
18 }
19
20 .content2{
21 背景色: #0000ff;
22 }
23
24 .content,
25 .content .content2{
26 display: -webkit-box;
27 display: -moz-box;
28 ディスプレイ: ボックス;
29 }
30
31 .content .content2,
32 .content .content1{
33 -webkit-box-align: center;
34 -moz-box-align: 中央;
35 box-align: 中央;
36 -webkit-box-pack: 中央;
37 -moz-box-pack: 中央;
38 ボックスパック: 中央。
39 }
40
41 .content {
42 高さ: 300px;
43 }
44
45 .content{
46 -webkit-box-orient: horizo​​ntal;
47 -moz-box-orient: 水平;
48 ボックス方向: 水平。
49 }
50
51 .content .content2,
52 .content .content1{
53 -webkit-box-flex: 1;
54 -moz-box-flex: 1;
55 ボックスフレックス: 1;
" 表示: -webkit-inline-box;
62 }
63
64 .content .content1 img{
65 width: 100%;
66 }
67
68 style >
69 head > ; 70 71 73
76 html >





上記はすべて Google Chrome 上で実行されます。
定期的な要約は私たちをより賢くし、混乱したときに進むべき道を見つけるのに役立ちます。