CSS容器-弹性布局

1：什么是弹性布局？

        是一种布局方式，主要解决某元素中的“子元素”的布局方式，为布局提供了最大的灵活性

 

2：弹性布局

        要实现布局效果的子元素，称为项目

        

        主轴

                项目们排列方向的一根轴，称之为主轴

                如果项目按 X 轴排列（横向排列），那么 X 轴就是主轴

                如果项目按 Y 轴排列（纵向排列），那么 Y 轴就是主轴

 

        交叉轴

                与主轴垂直交叉的轴称之为交叉轴

                如果 X 轴是主轴，那么 Y 轴就是交叉轴

                如果 Y 轴是主轴，那么 X 轴就是交叉轴

 

 

3：语法

        1：flex 容器

                将元素变为flex 容器后，所有的子元素都将变成 flex 项目，都允许按照弹性布局方式排序

                        属性：display

                            取值：1：flex:  将块级元素变成容器

                                        2： inline-flex :  将行内元素变成容器

                            注意：1：元素设置为 flex 容器后，子元素的 float，clear， verticla-align将失效

                                        2：