FlexBox详解笔记

重点:: FlexBox的布局方式主要分为两个角色

1. Flex-Container ( Flex容器)
2. Flex-Item ( Flex项目)

新建HTML样式,具体代码:

    <div class="Flex-container">
        <div class="box A">A</div>
        <div class="box B">B</div>
        <div class="box C">C</div>
        <div class="box D">D</div>
        <div class="box E">E</div>
    </div>

　　

新建CSS样式:

.box {
    width: 60px;
    height: 60px;
    background-color: #eee;
    text-align: center;
    line-height: 60px;
    border-radius: 4px;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
    font-size: 2em;
}
.A {background-color: #f9ca24;}
.B {background-color: #f0932b;}
.C {background-color: #eb4d4b;}
.D {background-color: #6ab04c;}
.E {background-color: #c7ecee;}

会得到下面如图效果,是因为display默认是 : display: block;

给flex-container容器添加: 

display: flex; 会得到:

布局主要正对两个部分的设定 (可理解为父子级的关系. 个人理解, 可能不正确)

• Flex -container

1. flex-direction: {row, column}: 行或者列
2. justify-content: 横轴排序的位置
3. align-items : 竖轴排序的位置
4. flex-wrap: 是否分行
5. flex-flow: 是flex-derection 和 flex-wrap的所写
6. align-content: 当flex-wrap的值为wrap时, 且有多行, 确定行和行之间的对其方式

• Flex-item

1. order : {number}  确定item的顺序,默认是从0开始排列的,  如果想要靠前可以设置为-1, 0 ,1, 2, ....(也就是说item的位置不是由html的顺序决定的)
2. align-self: 是用来复写flex-container的,可以是item本身进行位置的的排序
3. flex-basis: 设定item主轴方向的大小,auto是原来设定的大小,如果有值就会覆盖之前的参数
4. flex-grow: 在flex-container容器上有空余的空间,情况下item的大小,至充满整个容器
5. flex-shrink : 在flex-container容器上flex-wrap设置不换行的时候, flex-shrink:0  可以让item不受flex-container的影响.超出容器
6. flex: 是flex-grow;和 flex-shrink ; flex-basis的缩写

总结:item: flex-grow是设定item扩大的比例(0 为不缩放); flex-shrink是设定item缩小的比例(0为不缩放), flex-basis是设定item主轴方向基本的默认比例