flex 弹性盒模型 学习手记

css3

弹性盒模型 flex

1.父  节点元素 样式

parentNode {


          display:flex;----------------------建立和模型环境

 
        flex-flow:
row nowrap;
---------------------------  row (横排从左到右）       column(竖排）             nowrap( 不换行)            wrap(换行）

         justify-content:space-around -------------------
space-around（盒子外侧margin间隔 相同，都平均分配）

                                                       
--------------------flex-start(左对齐）           flex-end(右对齐）         center（居中对齐）   space-between(两端对齐）

         
align-item:flex-start ---------------------- -----------flex-start（顶端对齐）    flex-end（低端对齐）    。。。。。。

       

  }

2.子  元素 样式

childNode{

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

            flex-grow  （默认为0，）                             属性定义项目的放大比例，即如果存在剩余空间，也不放大。 例如比例参数：1 2 1

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

            flex-basis ）（默认值为auto）                   项目占据的主轴空间（main size） （比如350px）

            flex （默认值为0 1 auto）                            flex属性是flex-grow, flex-shrink 和 flex-basis的简写，

                                                               

            align-self: auto | flex-start | flex-end | center | baseline | stretch;             属性允许单个项目有与其他项目不一样的对齐方式，可覆盖

}