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：容器的 text - align 属性会失效

       

        2：容器属性

                1：flex - direction

                        指定容器的主轴及其排序方向

                            取值：

                                1：row 默认值： 即主轴为 x 轴，起点是左端

                                2：row - reverse：主轴为x轴，但起点在右端

                                3: column：主轴为 y 轴，起点在顶端

                                4：column-reverse: 主轴为Y 轴，起点在底端

 

            2：flex-wrap

                    当一个主轴排列不下的时候所有项目的时候，需要进行指定换行

                            取值：1：nowrap：默认值，即空间不够时，也不换行，但项目会自动缩小项目原本的高度和宽度

                                        2: wrap：自动换行，不会缩小项目原本的宽度和高度

                                        3：wrap- reverse：换行反转

 

            3：flex - flow

                    是 flex - direction 和 flex-wrap 的缩写形式

                            取值： 1：row nowrap  默认值

                                        2： direction wrap

            

            4： justify - content

                        定义项目在主轴上的对齐方式

                                取值：1：flex-start ：在主轴的起点对齐

                                          2：flex-end：在主轴的终点对齐

                                          3：center：在主轴居中对齐

                                          4：space - between：在容器中两端对齐
                                          5：space - around：每个项目两端的间距相同

 

            5：align - items

                        项目在交叉轴上的对齐方式

                                取值：1：flex - start ：在交叉轴起点对齐

                                          2：flex - end：在交叉轴的终点对齐

                                          3：center：在交叉轴居中对齐

                                          4：baseline：交叉轴上的基线对齐

                                          5：stretch：如果项目没有设置尺寸，在交叉轴上会占满所有的空间。

        

    3：项目属性

                该组属性只能设置在某一个项目上，只控制一个项目，是不会影响容器其他项目

                            1：order

                                    定义项目的排序，值越小，越靠近起点，默认值为0

                                            可以利用 order 来定义项目的排列和位置

 

                            2：flex - grow

                                    定义项目的放大比例，如果容器有足够的空间，项目将会被放大

                                            取值：整数数字，   无单位，默认为0，   不放大，取值越大，占的空间越多

                                

                            3：flex - shrink

                                    定义项目的缩小比例，即容器空间不足时，项目将按照比例缩小

                                                取值：默认值为1，空间不足时，则等比例缩小，

                                                            取值为0，则不缩小

 

                            4：align - self

                                    定义当前项目在交叉轴上的对齐方式

                                            取值：  1：flex - start

                                                        2:   flex - end

                                                        3： center

                                                        4:    baseline

                                                        5：stretch 

                                                        6：auto   自动继承父元素的 align -items 属性

以下是 CSS 的容器布局示例：

以下是容器的弹性布局效果图：这种布局经常用于电商的banner，或者企业网站的banner