Css3弹性盒子

CSS3弹性盒子（Fiexbox）

1.弹性盒子：随屏幕放大缩小盒子也放大缩小，不出现滚动条。对容器中的子元素进行排列、对齐和分配。

2.弹性盒子=弹性容器+弹性子元素

     注：弹性盒子在父元素写，只定义子元素的布局。

            一个弹性容器包含一个或多个弹性子元素。

            默认情况每个容器只有一行，弹性子元素在弹性盒子内一行显示。

3.浏览器支持（兼容模式）

3.定义弹性盒子： display: flex/inline-flex

4.改变排列方式：

      1) direction ：rtl    /* rightto left */

      2) 位置

         flex-direction: row/row-reverse/column/column-reverse

         row:横向从左到右排列（左对齐），默认

         row-reverse:反向横排列（右对齐），最后一项在最前面

                          column:纵向排列

        column-reverse:    反向纵排列，最后一项在最上面

3)  内容对齐

       justify-content:flex-start/flex-end/center/space-between/space-around

           flex-start :从头紧挨边线开始填充

   flex-end：紧挨尾部边线填充

   center：居中

   space-between:第一项紧挨mian-start边线对齐，最后一项紧挨mian-end边线对齐，其余间隔相等在同一行。

   space-around：首尾两边各留一半间隔排列，其余间隔相同。

    

4)align-items 纵向对齐方式

   flex-start/flex-end/center/baseline/stretch

5)flex-wrap:nowrap/wrap/reverse

       单行/溢出换行/溢出放上行

6）align-cotent:用于修改flex-wrap属性，类似align-items，不是设置弹性子元素的对齐，而是设置各行的对齐。

flex-start/center/flex-end/space-between/space-around/stretch

flex-start：各行向弹性盒子容器的起始位置堆叠

flex-end：各行向弹性盒子容器的结束位置堆叠

center：各行向弹性盒子容器的中间位置堆叠

space-between：各行在弹性容器中平均分布

space-around：各行在弹性容器中平均分布，两端保留子元素之间的间距大小的一半

stretch：各行伸展占用剩余位置（默认）

7）flex：定义弹性子元素如何分配空间

          eg.flex : 3   /*占总空间的三份*/

8)  order:n  /*n越小子元素排序越靠前*/

增：选择器中：a : not (: last-of-type)   /*表示除了最后一个超链接*/