display : -webkit-box-inline 我见_html/css_WEB-ITnose

php中文网

发布时间：2016-06-24 11:46:40

1647人浏览过

来源于php中文网

原创

发现：

最近在做移动端的东西，说起移动端弹性盒子布局真是无往不利，用起来特别爽，我也是偶尔间发现的这个属性并且它的用法，在网上基本查不到这个属性的资料（个人看法）。如果没有听说过（display:box）的朋友建议去别人家的博客看看CSS3就可以直接command+w了，由字看意，是不是能联想到 display:inline 这个属性，不知道的可以看看我的上一篇随笔, 之所有在前面加上-webkit-是因为太多人吧box-inline理解成内联盒子。

概念：

我们首先可以这么想 display:box-inline 是一个具有 display:inline特性的并且也具有 display:box 特性的一个组合体，它只能显示盒子内大小的东西并且可以使用display:box的一系列属性。

实例：

立即学习“前端免费学习笔记（深入）”；

我们先上一段代码：

1
2         * {
3             padding: 0;
4             margin: 0;
5         }
6         .content{
7             background-color: #ddd;
8         }
9
10         .content1{
11             background-color: #0f0;
12         }
13
14         .content2{
15             background-color: #0000ff;
16         }
17
18         .content{
19             display: -webkit-box;
20         height: 300px;
21         }
22
23         .content{
24             -webkit-box-orient: horizontal;
25         }
26
27         .content .content2,
28         .content .content1{
29             -webkit-box-flex: 1;
30         }
31
32         .content .content1{
33             width: 40px;
34         }
35
36      style >
37
38
39          固定的盒子 div >
40          产品的名称产品的介绍 div >
41      div >
42 body >

运行以后细心的朋友会发现，我给content1盒子设置了40px的宽度，但是它没有任何效果，原因是-webkit-box-flex: 1；它补充了左右2个盒子的大小，到这里会有人骂我，"如果想保持这个特性就直接把 content1 加上 display: inline-block 就可以了么，用的着你这样唧唧歪歪！”

原因

但我想说的是如果我想让里面的文字垂直居中呢？你说你有办法，我也相信有办法，但是如果里面的内容是一张图片呢？如果我们想让图片垂直居中，但同时不想让图片变形呢？是不是费点劲？肯定会有这样的需求“左边图片，右边上面是产品标题，下面是产品介绍” 这里我们第一联想到的就是盒子的pack和align，里面的元素基本上都会垂直居中，于是我们将content1 改成-webkit-box 并且加上box-pack:center; box-align:center;属性这个时候我们发现里面的内容确实垂直居中了但是宽度还是没有变化。

这时候试着将 content1的盒子改成 -webkit-box-inline 我们会惊喜的发现：

1.盒子的大小变成40px了

2.盒子内的文字也垂直居中了

压缩图

在线无损图片压缩工具

下载

3.带有inline特点的盒子竟然能够改变大小

这时候我们重新总结一下，能够改变自身大小而且初始化大小只有盒子内容积的第一印象肯定是 inline-block ，这时候我不由的惊叹了这么好用的特性竟然没发现很多人在用！我这里我再总结一下。

display : -webkit-box-inline

拥有以下特性：

拥有display:inline-block的特性：将对象昂呈递为内联对象，但是对象的内容作为块对象呈递，旁边的内联对象会被呈递在同一行内，允许空格。我的粗俗解释 - 盒子初始化时只能够容纳子元素的容积大小，并且可以改变盒子本身大小。
拥有display:box 特性，能够使用CSS3其内特性

个人觉得运用的合理的话这个属性特别好用。

最终示例代码：

1
2
3
4
5
6      title >
7
8         * {
9             padding: 0;
10             margin: 0;
11         }
12         .content{
13             background-color: #ddd;
14         }
15
16         .content1{
17             background-color: #0f0;
18         }
19
20         .content2{
21             background-color: #0000ff;
22         }
23
24         .content,
25         .content .content2{
26             display: -webkit-box;
27             display: -moz-box;
28             display: box;
29         }
30
31         .content .content2,
32         .content .content1{
33             -webkit-box-align: center;
34             -moz-box-align: center;
35             box-align: center;
36             -webkit-box-pack: center;
37             -moz-box-pack: center;
38             box-pack: center;
39         }
40
41         .content {
42             height: 300px;
43         }
44
45         .content{
46             -webkit-box-orient: horizontal;
47             -moz-box-orient: horizontal;
48             box-orient: horizontal;
49         }
50
51         .content .content2,
52         .content .content1{
53             -webkit-box-flex: 1;
54             -moz-box-flex: 1;
55             box-flex: 1;
56         }
57
58         .content .content1{
59             width: 300px;
60             height: 100%;
61             display: -webkit-inline-box;
62         }
63
64         .content .content1 img{
65             width: 100%;
66         }
67
68      style >
69 head >
70
71
72          div >
73          产品的名称产品的介绍 div >
74      div >
75 body >
76 html >