Flexible弹性布局

flex布局：

                 弹性布局

flex的两个重要概念：

                                    开启了flex布局的元素叫flex container     display: flex||inline-flex

                                    flex container 里面的直接子元素叫做 flex items

flex布局模型： 

flex items默认都是沿着主轴从main start开始往main end方向排布。

3.1flex的相关属性：

                应用在flex container上的css属性：

                                                                       flex-flow

                                      

                                                                       flex-direction

决定main axis的方向有四个取值 row(默认值）从左到右→，row-reverse

从右到左，column（从上到下），column-reverse(从下到上）

                                                                       flex-wrap

                  

 

                                                                        justify-content：决定了flex items 在主轴上的对齐方式。

flex-start(默认值): 与main start对齐                                                                                          ;flex-end:与main end 对齐  ;

center:居中对齐 ；                             

space-between：flex items之间的距离相等；flex items与main start,main end两端对齐；

space-evenly: flex items之间的距离相等；flex items与main start,main end之间的距离等与flex items之间的距离；

space-around: flex items之间的距离相等；flex items与main start,main end之间的距离等与flex items之间距离的一半。

                                                                        align-items

 

 

                                                                        align-content

           

           应用在flex items上的css属性：

                                                                       flex

              

 

                                                                       flex-grow

                       

                                                                        flex-basis

                      

                                                                        flex-shrink

            

                                                                         order

                           

                                                                         align-self