CSS3中较为重要点在于弹性盒子,动画以及媒体查询。而这次我讲的主要是弹性盒子以及一些小问题
弹性盒子:
- 弹性盒子是C3中的一种新的布局格式【1】,让页面中的元素可根据设备屏幕的大小自行调整布局的方式。
【1】:像以前的布局方式有表格布局(基本淘汰),浮动,定位,偏移等… - 弹性盒子的使用可让你的代码量有所减少。
弹性盒子内容
- 弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
- 弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
- 弹性容器内包含了一个或多个弹性子元素。
属性介绍(主介绍flex):
flex属性是弹性盒子中一种复合写法,主要是设置或检索伸缩盒对象的子元素如何分配空间。
它的取值有三个,分别为
- flex-grow
用来指定扩展比率,即剩余空间是正值时此「flex子项」相对于「flex容器」里其他「flex子项」能分配到空间比例。
在「flex」属性中该值如果被省略则默认为「1」 - flex-shrink
用来指定收缩比率,即剩余空间是负值时此「flex子项」相对于「flex容器」里其他「flex子项」能收缩的空间比例。
在收缩的时候收缩比率会以伸缩基准值加权
在「flex」属性中该值如果被省略则默认为「1」 - flex-basis用来指定伸缩基准值,即在根据伸缩比率计算出剩余空间的分布之前,「flex子项」长度的起始数值。
在「flex」属性中该值如果被省略则默认为「0%」
在「flex」属性中该值如果被指定为「auto」,则伸缩基准值的计算值是自身的 <’ width '> 设置,如果自身的宽度没有定义,则长度取决于内容。
举个例子:我有1L牛奶,现在有两个小孩一男一女,男的要喝500ml(flex-basis值),女的要喝300ml(flex-basis)值,现在看他们总量是否超过1L,超过则按收缩值在原来基础上扣除一些牛奶(flex-shrink),没超过则按扩张值在原来基础上在多加一些牛奶(flex-grow)。
如果你们看懂上面的例子那我们直接上代码
–未超出总量时
<style>
.milk {
width: 1000px;
height: 150px;
background-color: #ccc;
display: flex;/* 玩它你先设置它*/
}
/* 男 */
.bMilk {
width: 500px;
background-color: rgba(0, 68, 255, .6);
flex: 1 1 auto;/*分配 上面我已经定义了width,所以这里写auto*/
}
/* 女 */
.gMilk {
width: 300px;
background-color: rgba(255, 0, 170, .6);
flex: 1 1 auto;/*分配 上面我已经定义了width,所以这里写auto*/
}
</style>
<!-- 当两个孩子的总量没有超标时 -->
<!-- 奶1L(width:1000px) -->
<div class="milk">
<!-- 男孩要喝的牛奶500ml(width:500px)-->
<div class="bMilk"></div>
<!-- 女孩要喝的牛奶300ml(width:300px)-->
<div class="gMilk"></div>
</div>
效果
初始:
被扩张后
其实这有套公式:当子量没有超过父量时
多余的 width:1000-(500(男开始量)+300(女开始量))=200;
因为男的女的flex-grow都为1
所以
男 width:(1/(1+1))*200(多余的with)+500(男开始量)=600
女 width:(1/(1+1))*200(多余的with)+300(女开始量)=400
–当超出总量时
<style>
.milk {
padding: 8px 0;
width: 1000px;
height: 150px;
background-color: #ccc;
display: flex;
}
/* 男 */
.bMilk {
width: 700px;
flex: 1 1 auto;
background-color: rgba(0, 68, 255, .6);
}
/* 女 */
.gMilk {
width: 500px;
flex: 1 1 auto;
background-color: rgba(255, 0, 170, .6);
}
</style>
<!-- 当两个孩子的总量超标时 -->
<!-- 奶1L(width:1000px) -->
<div class="milk">
<!-- 男孩要喝的牛奶700ml(width:700px)-->
<div class="bMilk"></div>
<!-- 女孩要喝的牛奶500ml(width:500px)-->
<div class="gMilk"></div>
</div>
效果
初始:
因为我上面设置了男女的flex-shrink都为1,这个数字是怎么得到的了?
超出部分 widht:(男的width+女的width)-总量=(700+500)-1000=200;
flex-shrink :男女都为1
所以男女总的width:1200;
男的应该被减去width:1(flex-shrink)700/1200200=116.67(保留两位)
男的实际的width:700-116.67=583.33
女的应该被减去width:1(flex-shrink)500/1200200=83.33(保留两位)
女的实际的width:500-83.33=416.67
的出来的得数会有小数点后面的微小误差
你可改变女的flex-shrink的值再去计算,例如改成5,F12看男的元素的width会和计算出来的男的width一样。
注意:
1.弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。
2.弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。(flex-wrap:wrap --可换行)
如要学习更多有关弹性盒子知识可参考:
- 菜鸟: https://www.runoob.com/css3/css3-flexbox.html
- CSS参考手册: http://css.doyoe.com/(推荐)
这之下是我在项目中遇到的个小问题
如:当我有左右两个盒子设置,如图左边的盒子上面的设置最小宽度,下面的设置固定,右边则让其宽度100%。看两者的区别。
并且当你改变浏览器宽度时下面左盒子的固定宽度的设置并没有用,它会随着浏览器收缩宽度改变。而上面左盒子min-width,会让其保持宽度不变。
总结: 弹性盒子的难点在于复合flex里,对盒子的伸缩计算。在是实际运用中的一些细节。