CSS3 弹性盒

弹性盒

文档流：所显即所在 优点（阅读性好 维护性好） 缺点（不够灵活）
脱离文档流 浮动（功能单一） 定位（阅读和维护难度高）

弹性盒，表现灵活 阅读和维护性好
弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成

display:flex 即设为弹性盒
父盒子定义display:flex样式属性
每一个子元素即变为弹性的盒子了 脱离文档流 默认横排

学习弹性盒注意一个父子元素的概念 父设子规

父元素即容器上的设置项：
设置display:flex后的后续设置

    


    

        

            logo
            搜索
        
    

• flex-direction 决定轴的方向
    1.row 默认值。元素将水平显示，正如一个行一样。

.nav{
     width: 100%;
     height: 40px;
     line-height: 40px;
     display: flex;
     flex-direction: row;
     }

  2.row-reverse 与 row 相同，但是以相反的顺序。

.nav{
     width: 100%;
     height: 40px;
     line-height: 40px;
     display: flex;
     flex-direction: row-reverse;
    }

  3.column 元素将垂直显示，正如一个列一样。

.nav{
     width: 100%;
     height: 40px;
     line-height: 40px;
     display: flex;
     flex-direction: column;
    }

  4.column-reverse 与 column 相同，但是以相反的顺序。

.nav{
     width: 100%;
     height: 40px;
     line-height: 40px;
     display: flex;
     flex-direction: column-reverse;
    }

• flex-wrap 控制换行情况
    1.nowrap 默认值。规定元素不换行。
    2.wrap 规定元素在必要的时候换行。
    3.wrap-reverse 规定元素在必要的时候以相反的顺序换行。先按正序换行然后将行倒叙

• flex-flow 轴和换行的简写
    1.flex-container { flex-flow: }

• justify-content 以交叉侧轴为中心的集聚方式（元素在主轴方向上的对齐方式）

   1.flex-start默认值。项目位于容器的开头。

   2.flex-end项目位于容器的结尾。

   3.center项目位于容器的中心。

   4.space-between项目位于各行之间留有空白的容器内。

   5.space-around项目位于各行之前、之间、之后都留有空白的容器内。

• align-items 以交叉横轴为中心的挤聚方式（子元素需要设置宽高）

   1.stretch 项目被拉伸以适应容器。

   2.center 项目位于容器的中心。

   3.flex-start 默认值 项目位于容器的开头。

   4.flex-end 项目位于容器的结尾。

   5.baseline 项目位于容器的基线上。

• flex-item 弹性盒子元素属性
     1.order设置弹性盒子的子元素排列顺序。int 默认为0 小的在前
     2.flex-grow设置或检索弹性盒子元素的扩展比率。int
     3.flex-shrink指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器 的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。int 默认值1

• align-self在弹性子元素上使用。覆盖容器的 align-items 属性。

   1.auto默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 "stretch"。

   2.stretch元素被拉伸以适应容器。

   3.center元素位于容器的中心。

   4.flex-start元素位于容器的开头。

   5.flex-end元素位于容器的结尾。

   6.baseline元素位于容器的基线上。

   7.initial设置该属性为它的默认值。

   8.inherit从父元素继承该属性。

希望我的理解可以给你们提供一些帮助，学识有限，如有错误或者不足，欢迎私信！