伸缩盒模型flexbox

伸缩盒模型也叫弹性盒模型，或flexBox。它决定一个盒子在其它盒子中的分布，以及如何处理可用的空

间。使用该模型，==可以轻松的创建“自适应”浏览器窗口的流动布局==。

flexbox是一个很新的东西，在w3c希望可以使用flexbox实现一些更复杂的布局和应用。传统盒模型基于

HTML文档流排列，使用弹性盒模型可以规定特定的顺序。要开启弹性盒模型，只需要设置display的属性值

flex，因为它是CSS3中为display新添加的值类型。

==目的：在浏览器窗口变化时，盒子相应改变大小。==

==当我们为父盒子设为flex布局以后,子元素的float,clear和vertical-align属性将失效。==

注：但是设置了flex的本元素的float等属性不会失效！

flexbox的基础知识

由于 flexbox是一个整体的模块，它们之中一些属性是在父容器上设置，而一些是在子容器上设置。

一个flexbox的基本结构：

.box{ 
        display: flex;
    }    /*最外层的父容器，在父容器中定义此容器为弹性布局*/
.item1{ 
        flex-grow: 1; 
        background:pink
      }       /*flex-grow占1比例*/
.item2{ 
        flex-grow: 2; 
        background:orange
      }     /*占2比例*/
.item3{ 
        flex-grow: 3; 
        background:red
      }        /*占3比例*/

<div class="box">
    <div class="item1">1</div>
    <div class="item2">2</div>
    <div class="item3">3</div>
</div>


1.首先规定哪个是父容器，父容器中包含多个“项目”（每个子div），==项目是可以在父容器中弹性布局==

的。

2.其次还可以==规定父容器中要怎么来显示它里面的项目，如是否换行、项目排列方向等。==

一、父容器常用属性

1.display

display: flex; 定义一个flex容器

新弹性盒：设置父元素是一个弹性盒，==子元素会自动水平排列==（就不需要float了）

2.justify-content

justify-content: flex-end;

设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式（也就是左对齐，右对齐，居中）

space-between：相当于自动水平均分排列，但是顶着左右两边

space-around：相当于自动水平均分排列，但是不顶着左右两边

3.align-items

align-items 属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式（垂直对齐方式）

4.flex-wrap

flex-wrap: wrap; 让弹性盒元素在必要的时候拆行（换行）

也就是元素里面的内容太多放不下时，大小不够用时，就会自动拆行

5.min-width

默认伸缩盒是随着窗口大小来缩小比例的

还可以设置一个min-width:，当达到这个值时，盒子就不会随着窗口伸缩了，显示不出来的就直接被覆盖

#box1{
    width:100%;
    min-width:960px;
    /*height:80px;*/
    border:1px solid blue;
    display: flex;
    /*水平对齐方式*/
    /*justify-content: center;*/
    /*justify-content: space-between;*/
    justify-content: space-around;
    /*垂直对齐方式*/
    align-items:center;
    /*折行*/
    flex-wrap: wrap;
}

6.flex-direction

因为默认的是水平布局，如果不加这个就是水平布局

可以设置子项目垂直布局

/*flex-direction 设置子容器垂直布局   取值 column 列(垂直布局效果)*/
flex-direction: column;

7.align-content

决定在次轴方向的排列的效果

和justify-content在主轴上面的效果是一样的

相当于比align-items对于垂直方向的布局更加强大，align-items只能指定对齐方式（即开始的位置）

二、子容器常用属性

1.flex-grow

伸缩盒中的每一个元素称为一个项目。

flex-grow: number; ==number就是这个项目所占的份量，最后会算一个所占的比例进行分配==

注：要理解按照比例：并不是加起来等于多少，而是互相之间的一个比例！！

一个数字，规定项目将相对于其他灵活的项目进行扩展的量。默认值是 0。

.item1

.item2

.item3

这样就不需要写子元素的width了

#box1>div{
    /*width: 35%;*/
    height:60px;
    border:1px solid green;
}
#box1>div:first-child{
    flex-grow: 1;
}
#box1>div:nth-child(2){
    flex-grow: 5;
}
#box1>div:last-child{
    flex-grow: 2;
}

2.扩展：旧的伸缩盒

伸缩盒从被提出到如今一直在修改，所以这里涉及到了新老写法

伸缩盒最老版本
display:box;  
将对象作为弹性伸缩盒显示（火狐和webkit内核都支持display:-webkit-box;或display:-moz-box;）
子元素   box-flex:;

伸缩盒过渡版本
display:flexbox;  
将对象作为弹性伸缩盒显示

伸缩盒最新版本
display:flex;  
将对象作为弹性伸缩盒显示

3.总结

1.flex只能对它子元素起作用，不论是块级还是行内。 但是一定不能对它的子元素的子元素起作用。

2.当我们为父盒子设为flex布局以后,子元素的float,clear和vertical-align属性将失效。

注：但是设置了flex的本元素的float等属性不会失效！