弹性布局

容器样式属性

/*开启弹性布局首先在容器样式中写  display: flex;，以下样式才生效*/

flex-direction:;

flex-wrap:;

flex-flow:;

justify-content:;

align-items:;

align-content:;

容器样式属性的用法

flex-direction用法

flex-direction是设置主轴方向的，值为：row 行 | column: 列

/* 主轴方向默认x轴，y轴为交叉轴 */
flex-direction:row ;
/* 主轴方向设置为y轴 ，x轴则为交叉轴*/
flex-direction: column;
/*主轴为x轴，项目从右至左排列*/
flex-direction: row-reverse;
/*主轴为Y轴，项目从下至上排列*/
flex-direction: column-reverse;

flex-wrap用法

flex-wrap:nowrap;
flex-wrap: wrap;
flex-wrap:wrap-reverse;
/*nowrap为默认值不换行
wrap为换行
wrap-reverse 换行 第一行在最下面 */

justify-content的用法

justify-content:flex-start ;
            /* 默认值，左对齐 */
justify-content: flex-end;
            /* 右对齐 */
justify-content: center;
            /* 居中 */
justify-content: space-around;
            /* 每个项目两侧的间隔相等。项目之间的间隔比项目与边框的间隔大一倍。 */
justify-content: space-between;
            /* 两端对齐，项目之间的间距相等 */

align-items的用法

以下五个值，具体的对齐方式与交叉轴的方向有关，
           align-items:flex-start;
           /* 交叉轴起点对其 */
           align-items: flex-end;
           /* 交叉轴终点对齐 */
           align-items: center;
           /* 交叉轴的中点对齐 */
           align-items: baseline;
           /* 项目的第一行基线对齐 */
           align-items: stretch;
           /* 项目未设置高度或者设置auto,项目高度将占满容器的高度 */

align-content的用法

align-content:flex-end ;
         /* 与交叉轴的终点对齐 */
         align-content: flex-start;
           /* 与交叉轴的起点对齐 */
         align-content: center;
           /* 与交叉轴的中点对齐 */
         align-content: space-around;
          /* 每根轴线的两侧的间隔都相等。轴线之间的间隔比轴线与边框的间隔大一倍 */
         align-content: space-between;
         /* 与交叉轴两端对齐，轴线之间的间隔平均分部。 */
         align-content: stretch;
         轴线占满整个交叉轴

注： justify-content与align-content的区别：justify-content是与主轴方向对齐方式；align-content是交叉轴方向对齐方式

项目样式属性

order: ;
flex-grow: ;
flex-shrink: ;
flex-basis: ;
flex: ;
align-self: ;

order的用法

order属性定义项目的排列顺序，数值越小排序越靠前，默认值为0

式图重要代码

.box>div:nth-child(4){
    order: -1;

}
/*原本四号盒子现在排第一位*/

flex-grow的用法

flex-grow属性定义项目的放大比例，默认为0，即有剩余空间，也不放大。

如果所有的项目都为1，则它们平分剩余空间。如果有一项值为2，其他均为1，则前者分割的剩余空间比其他多一倍。

div {
           width: 200px;
           height: 200px;
           background-color: aqua;
           margin: 0 10px 10px 0;
           flex-grow: 1;
       }

flex-shrink的用法

flex-shrink属性定义项目的缩小比例，默认为1，即如果剩余空间不足，该项目被缩小。

如果所有的项目值为1，当空间不足时，都将等比例缩小；如果其中一个项目值为0，其余都为1，当空间不足时，前者不缩小；

负值对该项目属性无效

 .box {
            width: 700px;
            height: 500px;
            display: flex;
            background-color: antiquewhite;
            margin: 0 auto;
            }
div {
            width: 200px;
            height: 200px;
            background-color: aqua;
            margin:0 10px;
            flex-shrink: 1;
        }

flex-basis的用法

flex-basis属性定义了分配空间之前，该项目占据主轴空间。浏览器根据这个属性判断主轴是否有多余空间。默认值为0，即项目的本来大小。不常用！！！

flex的用法

flex 属性用于指定弹性子元素如何分配空间。

flex: auto | initial | none | inherit |  [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]

.box>div:nth-child(1) {
            flex:2;
        }
        .box>div:nth-child(2) {
            flex:1;
        }
        .box>div:nth-child(3) {
          flex:1 ;
          }
/*第一个占用2/4,其余各占用1/4*/

align-self的用法

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性，默认值为auto，表示继承父元素的align-items属性，如没父元素。则等同于stretch.

该属性有六个值，除了auto,其他值都与align-items的值一样。

align-self: auto;
       align-self: flex-start;
       align-self: flex-end;
       align-self: center;
       align-self: baseline;
       align-self: stretch;

.box>div:nth-child(2) {

          align-self: flex-end;
    /*将第二个盒子与交叉轴底部对齐*/

        }