CSS3现代布局（Flex/Grid/响应式设计）

 前端成长计划：deepseek给出的前端学习计划

一、Flex

        使用display:flex或display:inline-flex将一个元素设置为flex容器，容器的直接子元素自动成为flex项目。（适合响应式设计，结合媒介查询）

        1、容器属性（父元素，display:flex）

                flex-direction：设置主轴方向，默认为水平方向。                

                        row：水平方向

                        row-reverse：水平方向反向

                        column：垂直方向

                        column-reverse  垂直方向反向

                justify-content：设置主轴上项目（子元素）排列方式

                        flex-start：项目（子元素）对齐容器（父元素）起始边缘

                        flex-end：项目对齐容器的结束边缘

                        center：项目居中对齐

                        space-around：项目之间间隔相等，平分

                        space-between：项目两侧贴边，再余平分剩余空间

                align-items：交叉轴（主轴的垂直方向）方向上项目的排列方式（单行）

                        flex-start：项目对齐交叉轴的起始位置

                        flex-end：项目对齐交叉轴的结束位置

                        center：项目在交叉轴上居中

                        baseline：项目基线对齐

                        stretch：项目没设置大小，将拉伸以填满容器

                align-content：交叉轴上的项目的排列方式（多行，与主轴的justify-content相似）

                        flex-start：项目在交叉轴的起始位置

                        flex-end：项目在交叉轴的结束位置

                        center：项目在交叉轴上居中

                        space-around：项目在交叉轴上间隔相等，平分剩余空间

                        space-between：项目在交叉轴上两侧贴边，再余平分剩余空间

                        stretch：项目高度平分容器高度

                flex-wrap：设置是否换行

                        nowarp：默认，不换行

                        warp：换行

                flex-flow：是flex-direction和flex-wrap的复合属性，flex-flow:row wrap;

        2、项目属性（子元素）

                flex-grow：定义项目的放大比例，分配多余空间；数值大占比多

                flex-shrink：定义项目的缩小比例，分配不足的空间；数值大空间不足时缩小的比例大

                flex-basic：定义了再分配多余空间前，项目占据的主轴空间，长度或者百分比都可以

                flex：以上三个属性的简写形式，默认值为flex:0 1 auto

                align-self：设置单个项目的的对齐方式，覆盖了容器的alin-items属性的值

二、Grid

         使用display:grid或display:inline-grid将一个元素设置为Grid容器。

        1、容器属性（父元素，display:grid）

                grid-template-columns：设置每一列的宽度

                        100px 100px：空格隔开定义每一列的宽度

                        repaet(重复次数，重复值)：如repaet(2,100px)，重复次数填auto-fill则自动填充

                        1fr 2fr：用比例的方式平分剩余空间

                        auto：自动填充

                        minmax(min,max)：设置最大值和最小值

                        [c1] 100px [c2] 100px：c1和c2是第一、第二个网格线的名称

                grid-template-rows：设置每一行的高度

                        100px 100px：空格隔开定义每一行的高度

                        repaet(重复次数，重复值)：如repaet(2,100px)，重复次数填auto-fill则自动填充

                        1fr 2fr：用比例的方式平分剩余空间

                        auto：自动填充

                        minmax(min,max)：设置最大值和最小值

                        [c1] 100px [c2] 100px：c1和c2是第一、第二个网格线的名称

                grid-auto-columns：定义多余网格（未定义宽高的网格）的列宽

                grid-auto-rows：定义多余网格的行高

                grid-auto-flow：定义项目的排列顺序

                        row：默认值，按行排序

                        column：按列排序

                        row dense：按行排序，等到前边有空缺的网格时尝试填充

                        column dense：按列排序，前边有空缺网格时尝试填充

                row-gap：行间距

                column-gap：列间距

                gap：row-gap和column-gap的简写形式

                grid-template-areas：为每个单元格命名

                justify-items：设置项目在在单元格中的水平位置       

                        stretch：拉伸，占满单元格

                        start：起始位置

                        end：结束位置

                        center：居中

                align-items：设置项目在单元格中的垂直位置

                        stretch：拉伸，占满单元格

                        start：起始位置

                        end：结束位置

                        center：居中

                place-item：justify-items和align-items的简写方式

                align-content：设置内容（所有网格）在容器的垂直位置

                        stretch：拉伸，单元格没有指定大小时，拉伸占据整个容器

                        start：在容器的起始位置

                        end：在容器的结束位置

                        center：在容器内部居中

                        space-around：中间间隔相同，两侧间隔小一倍

                        space-between：中间间隔相同，两侧贴边

                        space-evenly：中间和两侧间隔均相同

                justify-content：设置内容在容器的水平位置

                place-content：justify-content和align-content的简写

        2、项目属性

                grid-column-start：项目左边对齐的垂直网格线

                grid-column-end：项目右边对齐的垂直网格线

                grid-row-start：项目上边对齐的水平网格线

                grid-row-end：项目下边对齐的水平网格线

                        number：数字，网格线的编号。例如2，则表示该项目左边对齐2号网格线

                        name：网格线的名称，在grid-template-columns和grid-template-rows中定义

                        span number：跨越的网格数量，即左右边框（上下边框）之间跨越number个网格

                grid-column：是grid-column-start和grid-column-end的简写

                grid-row：grid-row-start金额grid-row-end的简写

                grid-area：将项目放入该区域（在grid-template-areas中定义了区域名称）

                align-self：设置项目在单元格中的垂直位置，和align-items用法一致，但用于单个项目

                justify-self，项目在单元格中的水平位，和justify-items用法一致，但作用于单个项目

                place-self：align-self和justify-self的简写

三、响应式布局

        css3的媒体查询允许开发者根据不同的媒体类型和条件（如视口宽度、设备宽度、分辨率等）来应用不同的CSS样式规则。这使得网页能够根据用户的设备类型和屏幕尺寸提供更加灵活和响应式的布局。

        1、基础语法

               - @media 媒体类型 and|not|only (媒体特性){

                        css样式

                }

                - <style media="媒体类型"> @import url("style.css") 媒体类型 and|not|only (媒体特性);</style>

                - <link href="style.css" media="媒体类型 and|not|only (媒体特性) " ……

        2、媒体类型

                all：所有设备

                braille：盲文

                print：文档打印或打印预览模式

                projection：项目样式

                screen：彩色电脑屏幕

                tv：电视

        3、关键字

                all：连接媒体类型和媒体特性

                not：排除某种特定的媒体类型

                only：只有在特定的某种设备上识别

        4、媒体特性

                min-width：当屏幕宽度 大于等于 某个值的时候识别

                max-width：当屏幕宽度 小于等于 某个值的时候识别

                orientation：横竖屏（portrait竖屏/landscape横屏）