flex布局 笔记

        /* 默认x为主轴，从左往右排列 */
         flex-direction: row; 
        /* 把主轴设置为y轴，从上往下排列 */
         flex-direction: column; 

        /*justify-content:设置主轴上的元素排列方式 */
        /* 默认子元素在主轴靠左对其 */
        justify-content: flex-start; 
        /* 子元素居中对齐 */
        justify-content: center; 
        /* 盒子间的空间平均分配 */
         justify-content: space-around;
        /* 先两边贴边在平分剩余空间 */
         justify-content: space-between; 

        /* align-content:设置侧轴上的(多行)元素排列方式 */
          /* 侧轴从上到下 */
        align-content: flex-start; 
         /*  侧轴从下到上 */
         align-content: flex-end; 
         /*  侧轴居中对其 */
         align-content: center; 
          /* 侧轴平分剩余空间 */
         align-content: space-around; 
         /*  侧轴子元素先贴边在平分剩余空间 */
        align-content: space-between; 
         /*  平分父元素高度 */
         align-content: stretch; 


        /* align-items: 设置侧轴上的元素排列方式(单行) */
        /* 侧轴从上到下 */
         align-items: flex-start; 
        /* 侧轴从下到上 */
        align-items: flex-end; 
        /* 居中 */
        align-items: center; 
        /* 拉伸，子盒子不需要给高度 */
         align-items: stretch;

        /* 另起一行显示,默认强制在一行显示会压缩盒子大小 */
         flex-wrap: wrap; 

        /* flexLflow 属性是flex-direction 和 flex-wrap属性的符合属性 */
         flex-flow: column wrap; 

 

 

 

flex containerflex：父盒子   、  flex item：flex里的盒子   、   main axis: 主轴    、   cross axis：副轴   、  main start：主轴起点   、   main end：主轴终点     cross start：副轴起点   、  cross end、副轴终点  、  cross size：主轴长度    、     main size：副轴长度

        /* 开启flex布局 */
        display: flex;
        /* 主轴方向默认，从左到右 */
        flex-direction: row;
        主轴位置反转，从右到左
        flex-direction: row-reverse;
        修改主轴方向，从上到下
        flex-direction: column;
        主轴位置反转，从下到上
        flex-direction: column-reverse; 

   /* justify-content 决定了flex 在main axis 上的对齐方式 */
        /* 默认对齐方式 */
        justify-content: flex-start; 
        /* 与main end 对齐方式，盒子排列位置不变 */
        justify-content: flex-end; 
        /* 居中对齐 */
        justify-content: center; 
        /* 1.flex items 之间距离相等 2. 与main start 、main end两边对其 */
        justify-content: space-between; 
        /* 1.flex items 之间距离相等 2. flex items与main start、main end 之间的距离等于flex items之间的距离 */
        justify-content: space-evenly; 
        /* 1.flex items 之间距离相等 2. flex items与main start、main end 之间的距离等于flex items之间一半的距离 */
        justify-content: space-around; 

        /* 在交叉轴上面的对其方式 */
        /* 当flex items 在 cross axis 方向的size 为auto时，会自动拉伸至填充flex container */
        align-items: stretch; 
        /* 与 cross start 对其*/
        align-items: flex-start; 
        /* 与 cross end 对其*/
        align-items: flex-end; 
        /* 盒子居中对齐*/
        align-items: center; 
        /* 基线对齐*/
        align-items: baseline; 




        /* 如果父盒子装不下子盒子，这个标签进行压缩子盒子 */
        flex-wrap: nowrap; 
        /* 父盒子一行装不下子盒子，换行进行显示 */
        flex-wrap: wrap; 
        /* 由下往上显示 */
        flex-wrap: wrap-reverse; 

/* 5. flex-flow: flex:direction和flex:flex-wrap 的缩写属性 */
        flex-flow: row wrap;
        justify-content: space-evenly; 

        /* 6. align-content 决定了多行flex items在交叉轴上的对齐方式，用法与justify-content类似 */
        /* 默认值，与align items：stretch 类似 */
         align-content: stretch; 
        /* 起点位置对齐*/
        align-content: flex-start; 
        /* 末尾位置对其
        align-content: flex-end;      
  /* 居中位置对其*/
        align-content: center; 
        /* flex items 之间的距离相等，两端对齐*/
        align-content: space-between;
        /* flex items 之间的距离是items距两边距离的二倍*/
        align-content: space-around;
        /* flex items 之间的距离也是items距离两边的距离*/
        align-content: space-evenly; 
        /* 5. flex给items的设置 */
        /* oder:值越小items越靠前 */
        /* align-self:flex-end、center、start 单独决定对齐方式，会覆盖父元素的属性 ; */
        /* 加长  flex-grow:数字。 如果总和超过1剩余size*flex-grow/sum  */
        /* 加长  flex-grow:数字。 如果总和不超过1剩余size*flex-grow */
        /* 收缩  flex-wrap:数字。 flex-shrink*flex item 的 base size(放入flex-container
        之前的size) */
        /* flex-basis: 200; 决定主轴上面的盒子大小 */