flex布局总结(老版本) ​

介绍 ​

弹性盒子是 CSS3 的一种新的布局模式。

CSS3 弹性盒子 Flexible Box ，是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

flex有两个版本 display: box (老版本) 和 display: flex (新版本)

设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

接下来我们来看看老版本的flex布局是怎么样的.

轴的概念 ​

我们先来看一个简单的flex布局:

<style>
#wrap{
    width: 300px;
    height: 300px;
    border: 1px solid black;
    margin: 50px auto;
    display: -webkit-box; /* 老版本flex */
}
.box{
    width: 50px;
    height: 50px;
    background: pink;
    text-align: center;
    line-height: 50px;
}
</style>
<div id="wrap">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
</div>

这个结构中 #wrap 称为容器, .box 称为容器里的项目.

注意:老版本flex当项目总width超过容器时不会自动换行而是直接溢出!

如上图所示,flex布局中的有一个横向轴 X轴 和纵向轴 Y轴 箭头所指的方向为正方向, X轴 默认为主轴,所有的项目都是按主轴的正方向排列的,所以div虽然是块级标签依然可以同行显示.

项目在X轴上多出来的空间长度我们叫他 X轴富裕空间; 项目在Y轴上多出来的空间长度我们叫他 Y轴富裕空间;

容器的属性 ​

1. -webkit-box-orient ​

控制主轴是 X轴 还是 Y轴 .

属性值是 horizontal 主轴则为 X轴 ; 属性值是 vertical 主轴则为Y轴

依然采用上面的布局方案,在 #wrap 上添加 -webkit-box-orient: vertical; ,我们发现项目沿Y轴排列,因为这时Y轴是主轴:

2. -webkit-box-direction ​

控制主轴的方向

normal 为默认方向; reverse 为反方向.我们再在 #wrap 上添加 -webkit-box-direction: reverse; ,发现项目从下往上排列,因为主轴Y的正方向已经改成向上了.

3. -webkit-box-pack ​

分配 主轴富裕空间 的位置

start 在所有项目整体的(主轴为X轴:右边;主轴为Y轴:下边); end 在所有项目整体的(主轴为X轴:左边;主轴为Y轴:上边) ;center 在所有项目整体的(主轴为X轴:左右;主轴为Y轴:/上下); justify 在每个项目之间平均分配, 可以自己动手试试看有什么效果,我在这就测试一下继续在 #wrap 上添加 -webkit-box-pack: justify;:

4. -webkit-box-align ​

分配 侧轴富裕空间 的位置

start 在所有项目整体的(主轴为X轴:下边;主轴为Y轴:右边); end 在所有项目整体的(主轴为X轴:上边;主轴为Y轴:左边); center 在所有项目整体的(主轴为X轴:上下两边;主轴为Y轴:左右两边); 在 #wrap 上添加 -webkit-box-align: end;:

项目的属性 ​

-webkit-box-flex ​

将主轴上的富裕空间按比例分配到项目的width上

重新布局:

<style>
#wrap{
    width: 300px;
    height: 300px;
    border: 1px solid black;
    margin: 50px auto;
    display: -webkit-box; 
}
.box{
    width: 50px;
    height: 50px;
    background: blue;
    text-align: center;
    line-height: 50px;
    -webkit-box-flex: 1;
}
</style>
<div id="wrap">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
</div>

在项目中添加 -webkit-box-flex: 1; 这里主轴富裕空间一共有300-50*4= 100 px ;一共有4个项目则每个项目分 1/4 即 100*(1/4)= 25 px ,最终项目占的位置为 50+25=75 px ,看看效果:

项目分配了 主轴富裕空间 所以占满了主轴.

也可以单独给一个项目设置更多的比例,在css中添加

#wrap> .box:nth-child(1){
    -webkit-box-flex: 7;
}

这样第一个 .box 占了主轴富裕空间的 7/10 (一共把富裕空间分成了10分,第一个项目占七份,其它的各占一份) ,最终第一个项目占的位置为 50+100*(7/10)= 120 px ,看看效果: