首页 > 代码库 > 深入理解和应用display属性（二）
深入理解和应用display属性（二）
四、inline-block
此类元素是inline + block的合体
1) margin和padding都有效；width和height都有效；
.inline{ display: inline-block; width: 200px; background: red; margin: 10px; padding: 10px; }
<div class="inline"><a>inline01</a></div> <div class="inline"><a>inline02</a></div> <div class="inline"><a>inline03</a></div> <div class="inline"><a>inline04</a></div>
1) 还是存在8像素的间隔
2) Block/inline-block元素包裹的inline-block元素，默认超width会换行，hieght撑开，可以通过white-space:nowrap强制不换行，但不能实现文本省略显示。
a{ background: red; font-size: 14px; display: inline-block; } .overWidth{ white-space: nowrap; width: 100px; border: 1px solid gray; overflow: hidden; text-overflow: ellipsis; }
<div class="overWidth" > <a>a01dd</a> <a>a000000002</a> </div>
五、Inherit
继承父元素的display属性。
六、flex
实现盒子布局，主要分为容器和子元素相种。在容器元素上用display:flex指定为flex盒子，在子元素上用flex指定元素所占用的格子数。
Flex容器重要属性：
1) Flex-direction：表示项目排列方向，可以有四个，左到右，右到左，上到下，下到上
2) Flex-wrap：表示是否允许换行，默认不允许(nowrap)
Flex-flow：是flex-direction和flex-wrap的组合写法
.wrap02{ width: 600px; height: 200px; border: 1px solid red; display: flex; flex-flow: column wrap } .grid02{ flex-basis: 60px; background: gray; }
<div class="wrap02"> <div class="grid02">01</div> <div class="grid02">02</div> <div class="grid02">03</div> <div class="grid02 grid04 ">04</div> <div class="grid02">05</div> </div>
.wrap02{ width: 600px; height: 200px; border: 1px solid red; display: flex; flex-flow: column wrap; justify-content: space-around; } .grid02{ flex-basis: 60px; background: gray; }
<div class="wrap02"> <div class="grid02">01</div> <div class="grid02">02</div> <div class="grid02">03</div> <div class="grid02 grid04 ">04</div> <div class="grid02">05</div> </div>
.wrap02{ width: 600px; height: 200px; border: 1px solid red; display: flex; flex-wrap: wrap; align-items: center; } .grid02{ flex-basis: 200px; background: gray; }
<div class="wrap02"> <div class="grid02">01</div> <div class="grid02">02</div> <div class="grid02">03</div> <div class="grid02 grid04 ">04</div> <div class="grid02">05</div> </div>
Flex项目的重要属性：
1) Align-self：项目自身的对齐方式，可以覆盖容器的align-items属性的值
2) Flex：他是flow-grow\flow-shrink\flex-basis简写，设置元素占用的格子数，如下例子格子是均分的
.wrap{ width: 400px; height: 200px; border: 1px solid red; display: -webkit-flex; display: flex; } .grid{ background: gray; flex: 1; } .mid{ flex: 2; background: red; }
<div class="wrap" > <div class="grid">01</div> <div class="mid">01</div> <div class="grid">01</div> </div>
3) Flex-grow：所有子元素之和小于容器宽度时，如果处理剩余宽度，flex-grow默认为0，如果设置为正数，则表示索取剩余宽度值，公式如下：
子元素自身宽度 + 剩余宽度*(子元素自身glex-frow)/(所有子元素的flex-grow之后和)
.wrap{ width: 400px; height: 200px; border: 1px solid red; display: -webkit-flex; display: flex; } .grid{ background: gray; flex-grow: 1; flex-basis: 50px; } .mid{ flex-basis: 60px; background: red; }
<div class="wrap" > <div class="grid">01</div> <div class="mid">01</div> <div class="grid">01</div> </div>
Grid1和grid3计算：50 + 240 * 1/2 = 170
Grid2计算：没有设置flex-grow属性，所以为固定值
4) Flex-shrink：所有子元素之和大于容器宽度时，如果处理超出宽度，flex-shrink默认为1，值越大减小的越厉害，值为0，表示不减少,公式如下：
子元素自身宽度 – 超出宽度 * ( 子元素自身宽度 * 子元素自身的flex-shrink/ ( 所有子元素宽度 * 子元素的flex-shrink之和) )
.wrap{ width: 400px; height: 200px; border: 1px solid red; display: -webkit-flex; display: flex; } .grid{ background: gray; flex-basis: 200px; } .mid{ flex-basis: 100px; background: red; }
<div class="wrap" > <div class="grid">01</div> <div class="mid">01</div> <div class="grid">01</div> </div>
Grid1和grid3计算：200 – 100 * 200 / 500 = 160
Grid2计算：100 – 100 * 100 /500 = 80
注意事项：
1) Flex-grow和flex-shrink不好和flex直接混合应用，此两个值是在固定宽度的情况下进行均分的算法，如果嵌入flex属性，算法还不明确。
深入理解和应用display属性（二）