flexbox 弹性盒子

flexbox 弹性盒子

most important：

display：flex；

display:-webkit-flex;

1.基本知识

container(容器)属性

  flex-direction:

　　　　row | row-reverse | column | column-reverse

　　　　属性决定主轴的方向

 justify-content:

　　　　flex-start | flex-end | center | space-between | space-around | space-evenly

　　　　属性定义了项目在主轴上的对齐方式

 align-items:

　　　　flex-start | flex-end | center | baseline | stretch

　　　　属性定义项目在交叉轴上对齐方式 

  flex-wrap:

　　　　nowrap | wrap | wrap-reverse

　　　　属性定义如何换行

 flex-flow

　　　　'flex-directionz'|| 'flex-wrap', column-reverse wrap; 

　　　　属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap

 align-content

　　　　flex-start | flex-end | center | space-between | space-around | space-evenly | stretch

　　　　属性定义了容器在交叉轴(侧轴)上的对齐方式，该属性对单行弹性盒子模型无效。

　　与align-items区别，align-items 行中元素的对齐方式，align-content是多行的时候行本身的对齐方式。如下图：

                              

元素属性

 order 属性定义项目的排列顺序。

flex-grow属性定义项目的放大比例，默认是0，不放大。

 flex-shrink属性定义了项目的缩小比例，默认是1，空间不足会缩小比例。

flex-basis属性定义了项目默认占据的主轴空间。

flex属性是flex-grow, flex-shrink 和 flex-basis的简写；none 表示（0，0，auto）；auto表示(1,1,auto)

align-self定义单个项目在交叉轴上的对齐方式，可覆盖align-items属性

注意：

flex-shrink not work
容器的属性flex-wrap:wrap 会影响 flex-shrink
元素flex-basis 设置 默认宽度。

2.例子

 有一个很经典的例子就是🎲点数的例子。

a.4个点，分布在4个角上。

实现方式1:

    <div class="box">
        <div class="column">
            <div class="row"></div>
               <div class="row"></div>
           </div>
        <div class="column">
            <div class="row"></div>
               <div class="row"></div>
           </div>
    </div>
<style type="text/css">
.box{
    display: flex;
    flex-direction: row;
    justify-content:space-between;
    border:1px solid pink;
    width:30px;
    height: 30px;
}
.box .row{
    background-color: black;
    width: 10px;
    height: 10px;
    border-radius: 10px;
}
.box .column{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
</style>