css的样式类

温习css样式类

一：横轴设置

1.display:box    父元素设置此属性，使其子元素排列在一行，水平排列，类似 display：inline-block

浏览器支持：-webkit-box, -ms-box 或 -moz-box

        none:此元素不会被显示

        block：块级元素，此元素前后带有换行符

        inline：此元素为内联元素，前后无换行符

        inline-block:行内的块元素

        list-item:作为列表显示

        run-in：根据上下文作为块级元素或者内联元素显示

        table: 作为块级表格显示（类似<table>表格），前后带有换行符

        inherit:规定应该从父级继承display属性

可在其子元素上设置：

        （1）box-flex：number     

            占父级元素宽度的number份

            若子元素设定宽度，则此元素应用固定宽度，其他为设置固定宽度的子元素占父元素除去固定宽度后的number份

            若子元素有margin值，则其余子元素占父元素除去margin和固定宽度后的number份

           （2）box-orient:horizontal/vertical

            父级元素设置此属性，则子元素水平或垂直排列

            horizontal：水平排列，子元素width和=父元素width，若父元素的width固定，则子集width无效，子元素充满父元素

            vertical：垂直排列,子元素的height和=父元素height，若父元素的height值固定，则子元素height无效，子元素height充满父级

            （3）box-direction：normal/reverse

              父级元素设置该属性，确定子元素排列顺序

               normal：子元素按照html顺序排列

                reverse： 反序

               （4）box-align：start/end/center/stretch

                在父元素设置该属性，子元素的垂直对齐方式

                start：垂直顶部对齐

                end：垂直底部对齐

                center：垂直居中对齐

                stretch：拉伸子代的高度与父代高度一致，子代height无效

               （5）box-pack:start/end/center

                在父元素设置此属性，子元素的水平对齐方式

                start：水平左对齐

                end：水平右对齐

                center：水平居中对齐

2.box-orient     规定框的子元素被水平或垂直排列，水平排列从左向右，垂直排列从上向下，注意：box-direction 和box-ordinal-group可以改变此顺序

浏览器不支持box-orient属性  ， Firefox使用 -moz-box-orient  ，Safari 、Opera、Chrome支持

 -webkit-box-orient

            inline-axis: 沿着行内轴排列子元素

            block-axis： 沿着块轴排列子元素

            inherit ： 从父元素继承属性box-orient的值

3.flex-direction  规定灵活项目的方向，注意：元素不是弹性盒对象的元素则此属性不起作用

浏览器支持：-webkit-flex-direction、 -ms-flex-direction、 -moz-flex-direction、-o-flex-direction(小程序)

        row： 默认值，灵活的项目水平显示，正如一个行一样

        row-reverse： 与row相同，但是以相反的顺序

        column： 灵活的项目垂直显示，正如一个列一样

        column-reverse： 与column相同，但是以相反的顺序

        initial ： 设置该属性为他的默认值，initial关键字可设置CSS属性为默认样式，用于任何HTML元素上的CSS样式

        inherit : 从父元素继承该元素

4.box-align和box-pace 使其子元素居中

浏览器支持：-webkit-box-pace、-moz-box-pace

           start：对于正常的框，首个子元素的左边缘放在左侧（最后子元素后为剩余空间）；对于反方向的框，最后子元素的右边缘放在右边（首个子元素前为剩余空间）

           end ： 对于正常框，最后子元素的右边缘被放在右边（首个子元素前为剩余空间）；对于反方向的框，首个子元素的左边缘放在左侧（最后子元素后为剩余空间）

          center ： 均等的划分多余空间，一半空间置首元素前，一半空间置于最后元素后

          justify ： 每个子元素之间划分多余空间，首元素前和最后元素后无多余空间

5.justify-content   设置或检索弹性盒子元素在横轴上的对齐方式

浏览器支持：-wenkit-justify-content、-moz-justify-content、-o-justify-content-、-ms-justify-content

      提示：使用align-content属性对齐交叉轴上的各项（垂直）

       flex-start ：默认值，项目位于容器的开头

       flex-end ： 项目位于容器的结尾

       center ： 位于容器中心

       space-between ： 项目位于各行之间留有空白的容器中

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

二：纵轴设置

1.box-align和box-space配合居中子元素,规定如何对齐框的子元素

浏览器：-moz-box-align、 -webkit-box-align

        start/end : 每个框的上边缘沿着框的顶部放置，每个框的下边缘沿着框的底部放置，正好相反

        center：均等的分割空间，一半位于子元素上，一半位于子元素下

        baseline： 若box-orient为inline-axis或horizontal，所有子元素均与其基线对齐

        stretch ： 拉伸子元素填充包含块

2.align-items  设置flex对象元素的对齐方式  注意：align-self属性可重写align-items属性

浏览器支持：-webkit-align-items、-moz-align-items、-ms-align-items

        stretch ： 拉伸元素以适应容器

        center ： 中心元素在容器内

        flex-start：位置元素在容器开头

        flex-end： 位置元素在容器末端

        baseline：位置元素在容器基线