学习css的第五步 弹性盒子

第一步

  开启弹性盒子

      块元素：display:flex;

      行内元素：display：inline-flex；

      弹性盒子是通过父元素去控制子元素的排列方式

      一旦开启弹性盒子：

        弹性容器：哪个元素开启弹性盒子，谁就是弹性容器

        弹性元素：弹性容器的直接子元素

      在弹性容器，弹性元素身上有很多预定义的样式，可以帮助我们改变布局

        弹性容器（6个）*****

          flex-direction: ;

          justify-content: ;

          align-items: ;

          flex-wrap: ;

          align-content: ;

          flex-flow: ;

        弹性元素（6个）

          flex-grow: ;

          flex-shrink: ;

          flex-basis: ;

          order: ;

          align-self: ;

          flex

第二步

  /* 1、flex-direction  改变主侧轴的方向 */

        /* flex-direction: row; */

        /* 2、justify-content: ; 控制主轴方向的子元素的对齐方式   */

        justify-content: flex-start;

        /* 3、align-items: ; 控制侧轴方向，单行元素的对齐方式 */

        /* align-items:flex-start ; */

        /* 4、flex-wrap: ;  控制元素是否换行，默认是不换行 */

        /* flex-wrap: wrap; */

        /* 5、align-content: ; 控制侧轴方向，多行元素的对齐方式 */

        align-content: space-evenly;

        /* 6、flex-flow 同时设置flex-direction，flex-wrap  */

弹性元素的属性
 

1、order：定义项目的排列顺序。数值越小，排列越靠前，默认为0。

2、flex-grow：定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

3、flex-shrink：定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

4、flex-basis：定义了在分配多余空间之前，项目占据的主轴空间（main size）。

    浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，

        即项目的本来大小。

5、flexflex：属性是flex-grow, flex-shrink 和 flex-basis的简写，

      默认值为0 1 auto。后两个属性可选。

6、align-self：允许单个项目有与其他项目不一样的对齐方式，

        可覆盖align-items属性。默认值为auto，

        表示继承父元素的align-items属性，如果没有父元素，

        则等同于stretch。