flex-box 弹性盒模型

时间 2019-11-12 标签 flex box 弹性盒模型

还记得盒模型吗？css

除了盒模型以外css3为咱们提供了一个弹性模型，称之为自适应布局；html

接下来咱们看看怎么用。css3

首先，咱们须要清楚的是弹性布局有哪些优势，web

以下：浏览器

优势：
1 适应性强，在作不一样屏幕分辨率的界面时很是实用
2 能够随意按照宽度、比例划分元素的宽高
3 能够轻松改变元素的显示顺序
4 自适应布局实现快捷，易维护

理解弹性盒模型布局

到目前为止，咱们还不知道什么是弹性模型，弹性模型能干吗，别着急，咱们一点点来。测试

首先：flex

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
body,div,ul,li{
    margin:0;
    padding:0;
}
body{
    background: #d2b2ce;
}
ul{
    width:400px;
    height:400px;
    background: #f0f0f0;
    margin:50px auto;
}
li{
    list-style: none;
    padding:25px;
}
ul :nth-child(1){
    background: #ccc;
}
ul :nth-child(2){
    background: #999;
}
ul :nth-child(3){
    background: #666;
}
ul :nth-child(4){
    background: #333;
}
ul :nth-child(5){
    background: #111;
}
</style>
</head>
<body>
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
</body>
</html>

这是个人一个页面布局，毫无疑问，以上的布局样式以下图：spa

这是正常的盒模型布局方式。3d

display:box

接着咱们给ul填上一个属性：

display:box;     //将对象做为弹性盒模型显示

以后咱们在看一下页面显示的布局样式：

看页面的话显然li的display属性由块属性变行属性了。

这只是个开始，display：box只是让ul变为弹性盒模型，接着还有不少更有意思的属性。

box-orient：

接下来咱们给ul属性添加以下css命令：

-webkit-box-orient: [horizontal | vertical] ;

horizontal //默认值 水平排列
vertical     //纵向排列

-webkit-box-orient:horizontal:

-webkit-box-orient:vertical:

属性：由图可看出此属性表明着弹性盒模型对象的子元素的排列方式；取值有两个，一个横向，一个纵向。

box-pack & box-align

完事开头难，头已经开完了，接下来的属性就简单地说；

box-pack: 弹性盒模型对象的子元素的对齐方式,换言之，子元素排列时从哪边起？

取值：

start：
设置弹性盒模型对象的子元素从开始位置对齐（大部分状况等同于左对齐） //默认值
center：
设置弹性盒模型对象的子元素居中对齐
end：
设置弹性盒模型对象的子元素从结束位置对齐（大部分状况等同于右对齐）
justify：
设置或弹性盒模型对象的子元素两端对齐

box-align：弹性盒模型对象的子元素的对齐方式。

取值：

start：
设置弹性盒模型对象的子元素从开始位置对齐
center：
设置弹性盒模型对象的子元素居中对齐
end：
设置弹性盒模型对象的子元素从结束位置对齐
baseline：
设置弹性盒模型对象的子元素基线对齐
stretch：
设置弹性盒模型对象的子元素自适应父元素尺寸   //默认值

看着两个意思彷佛相同？那他们两个到底有什么区别呢？看图：

注明：此属性的排列方式与box-orient属性值有关。

如图所示, 以上四个图表明了box-orient与box-pack、box-orient与box-algin的关系及具体取值的排列方式。

box-flex

属性：弹性盒模型对象的子元素如何分配其剩余空间。

取值：number；

具体实例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
body,div,ul,li{
    margin:0;
    padding:0;
}
body{
    background: #d2b2ce;
}
ul{
    width:400px;
    height:100px;
    background: #f0f0f0;
    margin:50px auto;
    display: -webkit-box;
}
li{
    list-style: none;
    padding:25px;
}
ul :nth-child(1){
    background: #ccc;
}
ul :nth-child(2){
    background: #999;
}
ul :nth-child(3){
    background: #666;
}
ul :nth-child(4){
    background: #333;
}
ul :nth-child(5){
    background: #111;
}
</style>
</head>
<body>
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
</body>
</html>

此段代码再是没有作任何操做，显示如图：

其中，带背景色的五个块分别为5个li，而白色部分为ul的空白部分。此时用box-flex属性，

代码以下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
body,div,ul,li{
    margin:0;
    padding:0;
}
body{
    background: #d2b2ce;
}
ul{
    width:400px;
    height:100px;
    background: #ffffff;
    margin:50px auto;
    display: -webkit-box;
}
li{
    list-style: none;
    padding:25px;
}
ul :nth-child(1){
    background: #ccc;

}
ul :nth-child(2){
    background: #999;
    -webkit-box-flex:1;
}
ul :nth-child(3){
    background: #666;
}
ul :nth-child(4){
    background: #333;
    -webkit-box-flex:1;
}
ul :nth-child(5){
    background: #111;
}
</style>
</head>
<body>
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
</body>
</html>

此时我给第二个及第四个li加上了box-flex的属性，页面变成：

显然第二个及第四个li的宽度增长了。增长的部分是 [ulWidth 400 - liWidth 50 * li.length 5 ]/ box-flex+(此父级标签下的全部的box-flex的属性值相加) 的值；

意思是我须要获得此父级元素（UL）剩余的空白宽度，而后除上 box-flex 份值获得一份box-flex 的值在按照具体的box-flex比例去分配 UL 的剩余空白宽度。

box-ordinal-group

属性：弹性盒模型对象的子元素的显示顺序；

取值：用整数值来定义弹性盒模型对象的子元素显示顺序。

数值较低的元素显示在数值较高的元素前面；
相同数值的元素，它们的显示顺序取决于它们的代码顺序；

啥意思呢？意思就是说咱们能够经过这个属性给元素设置一个显示顺序。

看代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
body,div,ul,li{
    margin:0;
    padding:0;
}
body{
    background: #d2b2ce;
}
ul{
    width:400px;
    height:100px;
    background: #ffffff;
    margin:50px auto;
    display: -webkit-box;
}
li{
    list-style: none;
    width:50px;
    height:100px;
    text-align: center;
    line-height: 100px;
    font-size: 30px;
    color: #fff;
}
ul :nth-child(1){
    background: #ccc;

}
ul :nth-child(2){
    background: #999;
    -webkit-box-flex:1;
}
ul :nth-child(3){
    background: #666;
}
ul :nth-child(4){
    background: #333;
    -webkit-box-flex:1;
}
ul :nth-child(5){
    background: #111;
}
</style>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
</body>
</html>

这样的一页面显示出来的效果如图：

li很整齐的按照代码顺序排列出来。

以后我作了一些修改，我在每一个li中添加了box-ordinal-group这个属性，而且设一些值。

我作了如下调整：

ul :nth-child(1){
    background: #ccc;
    -webkit-box-ordinal-group:5;

}
ul :nth-child(2){
    background: #999;
    -webkit-box-flex:1;
    -webkit-box-ordinal-group:4;
}
ul :nth-child(3){
    background: #666;
    -webkit-box-ordinal-group:3;
}
ul :nth-child(4){
    background: #333;
    -webkit-box-flex:1;
    -webkit-box-ordinal-group:1;
}
ul :nth-child(5){
    background: #111;
    -webkit-box-ordinal-group:2;
}

设置的顺序是5 4 3 1 2 ，若是按照这个顺序显示li元素的话应该是 4 5 3 2 1.咱们看一下具体的实现是：

因此此属性理解起来就至关于给元素设置了一个显示顺序。

box-direction

属性：弹性盒模型对象的子元素的排列顺序是否反转。

取值：

normal：
设置弹性盒模型对象的子元素按正常顺序排列
reverse：
反转弹性盒模型对象的子元素的排列顺序

Firefox设置box-direction为reverse时，在将元素的排列顺序反转的同时也将元素的对齐方式逆转了；Safari和Chrome则只是反转元素排列顺序。

此属性效果：

以上就是弹性盒模型涉及到的一些属性，还有一些属性因为用法不明确或兼容性问题本文就暂不作介绍了。

特此声明：本文全部实例代码皆以webkit为基础，如用其余浏览器测试，请自主改下内核前缀。

参考资料：W3CHTML