css中的表格布局，弹性布局和⽹格布局display:table;
常见的容器属性
display:table=>相当于“table”标签；
常见的项⽬属性
display:table-row=>相当于“tr”标签；
display:table-cell=>相当于“td”标签
display: table时padding会失效
display: table-row时margin、padding同时失效
display: table-cell时margin会失效
display:flex;
常见的容器属性
1. flex-direction决定项⽬是⽔平排列还是垂直排列
row ⽔平排列
row-reverse ⽔平反向排列
column 垂直排列
column-reverse 垂直反向排列
2. flex-wrap 决定项⽬如果⼀⾏排列不下以什么⽅式展⽰
nowrap 不换⾏
flex布局详细讲解wrap 换⾏
wrap-reverse; 宽度不⾜换⾏显⽰，从下往上开始
3. flex-flow
flex-flow属性是flex-direction和flex-wrap的缩写，表⽰flex布局的flow流动特性
4. justify-content 项⽬在主轴上的对齐⽅式
flex-start 开始位置
flex-end 结束位置
center 中间
space-between 两端对齐，项⽬之间的间隔都相等
space-around 每个项⽬两侧的间隔相等。所以，项⽬之间的间隔⽐项⽬与边框的间隔⼤⼀倍
5. align-items 项⽬在交叉轴（侧轴）上的对齐⽅式
flex-start 伸缩项⽬在侧轴起点边的外边距 紧靠住 该⾏在侧轴起始边；
flex-end 伸缩项⽬在侧轴终点边的外边距 紧靠住 该⾏在侧轴终点边；
center 伸缩项⽬的外边距盒 在该⾏的侧轴上居中放置；
6. align-content (⾏与⾏之间的对齐⽅式) 定义多个伸缩⾏的对齐⽅式； 没有换⾏就不存在多⾏的情况。常见的项⽬属性
1. order 排序⽅式，数字越⼩就越在前⾯
2. flex-grow 定义项⽬的放⼤⽐例，默认为0，即如果存在剩余空间，也不放⼤
3. flex-shrink 定义了项⽬的缩⼩⽐例，默认为1
4. flex-basis 属性定义了在分配多余空间之前，项⽬占据的主轴空间
5. flex 是flex-grow、flex-shrink和flex-basis三属性的简写总和
6. align-self 允许单个项⽬有与其他项⽬不⼀样的对齐⽅式，可覆盖align-items属性
项⽬属性中常⽤的flex:1表⽰平分
align-self表⽰单独定义项⽬的布局⽅式
display:grid
常见的容器属性
1. display:grid定义⼀个容器属性为⽹格布局
2. grid-template-columns: 100px 100px 100px表⽰创建三列，每列的宽度是100px
3. grid-template-columns: repeat(3, 1fr)表⽰创建三列，每列平均分配
4. grid-template-columns: 150px 100px 50px 1fr；表⽰创建四列，最后⼀列占全部剩余的位置
5. grid-template-rows: 50px 50px表⽰创建两⾏，每⾏的⾼度是50px
6. ⾏其他的也可以跟列⼀样的
7. grid-gap: 1px；表⽰每个项⽬之间的间隙
常见的项⽬属性
1. grid-column-start: 1；表⽰该项⽬所开始的位置(从最左边开始)
2. grid-column-end: 4；表⽰该项⽬所结束的位置
3. 上⾯1和2的简写可以是grid-column: 1 / 4;
4. grid-row-start: 2；类似上⾯的列的处理⼀样的
5. grid-row-end: 4;

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。