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

Discovered:

I have been working on mobile stuff recently. Speaking of the flexible box layout on the mobile side, it is really good. It is very fun to use. I also discovered this attribute accidentally and its Usage, basically no information about this attribute can be found on the Internet (personal opinion). If you haven’t heard of (display:box), I suggest you go to other people’s blogs and look at CSS3 and you can directly command w. From the word meaning, can you think of the attribute display:inline? If you don’t know, you can take a look. In my last essay, I added -webkit- in front of it because too many people understood box-inline as inline box.

Concept:

We can first think of display:box-inline as a combination with display:inline characteristics and display:box characteristics. It can only display inside the box. Size things and can use a series of attributes of display:box.

Example:

Let’s start with a piece of code:

1 < style >
2 3 🎜> 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; 🎜> 17
18 .content{
19 display: -webkit-box;
20 height: 300px;
21 }
22
23 .content{
24 -webkit-box-orient: horizontal;
25                                                                                                .            }
31                                              32 .content .content1{
33                                                                                               gt;
38 < div class ="content" >
39 >Product introduction
41
42


After running, careful friends will find that I give The content1 box is set to a width of 40px, but it has no effect. The reason is -webkit-box-flex: 1; it supplements the size of the two boxes on the left and right. Some people will scold me here, "If you want to maintain this feature, just go directly Is it enough to just add display: inline-block to content1? You are so fussy about using it! ”

Reason

But what I want to say is what if I want the text inside to be vertically centered? You said you have a way, and I believe there is a way, but what if the content inside is a picture? What if we want the image to be centered vertically, but at the same time we don’t want it to be distorted? Does it take some effort? There will definitely be such a demand as "the picture on the left, the product title on the right, and the product introduction below." The first thing we think of here is the pack and align of the box. The elements inside will basically be vertically centered, so we change content1 to -webkit-box and add the box-pack:center; box-align:center; attribute. At this time, we found that the content inside was indeed vertically centered but the width still did not change.

At this time try to change the box of content1 to -webkit-box-inline We will be surprised to find:

1. The size of the box becomes 40px

2 .The text inside the box is also vertically centered

3. The box with inline feature can actually change the size

Let’s summarize again at this time, it can change its own size and the initial size is only within the box My first impression of the volume was definitely the inline-block. At this time, I couldn’t help but marvel at how many people didn’t find such an easy-to-use feature using it! Let me summarize it here.

display : -webkit-box-inline

has the following features:

1. has the feature of display:inline-block: render the object as an inline object , but the object's contents are rendered as a block object, and the adjacent inline objects are rendered on the same line, spaces allowed. My crude explanation - the box can only accommodate the size of the child elements when initialized, and the box itself can be resized.
2. Has the display:box attribute and can use the CSS3 features

Personally, I think this attribute is particularly useful if used properly.

Final example code:

 1 
 2  < html >
 3  < head  lang ="en" >
 4      < meta  charset ="UTF-8" >
 5      < meta  name ="viewport"  content ="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"   />
 6      < title >
 7      < style >
 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      
69 
70  < body >
71      < div  class ="content" >
72          < div  class ="content1" >< img  src ="3.jpg.680.510.jpg" >
73          < div  class ="content2" >产品的名称 < br />产品的介绍
74     
75 
76 

以上都是在谷歌浏览器上运行的。
经常的总结让我们变得更智慧，让我们在迷茫的时候找到前进的方向！