flex弹性盒子布局:

弹性盒模型的作用就是控制子元素的布局形成弹性盒在父元素上写displayflex特点:当父元素变成弹性盒子之后子元素默认横向显示 沿着主轴排列默认主轴x轴另外一个叫做侧轴当父元素变成弹性盒子之后。子元素都能直接设置宽高marginauto是生效的如果子元素总宽度大于父元素那么是不会超出父盒子也不会自动换行而是会被挤压可以左右布局圣杯布局设置主轴方向flex-direction: row | row-reverse | column | column-reverse;row横向、x轴 (常用)column纵向、y轴常用设置子元素在主轴的对齐方式justify-content: flex-start | flex-end | center | space-between | space-around;flex-start主轴的开始位置对齐没有间距flex-end主轴的结束位置对齐没有间距center居中, 主轴的中间位置对齐没有间距space-between主轴上面两端对齐元素与元素之间的距离自动分配常用space-around:自动分配距离、左右间距都一样。(常用)主轴上面的间距环绕元素与元素之间的距离是靠边元素与父元素之间的2倍space-evenly:自动分配剩余空间所有的距离都一样设置子元素在侧轴交叉轴的对齐方式align-items: flex-start | flex-end | center | baseline | stretch默认值;flex-start侧轴的开始位置flex-end侧轴的结束位置center侧轴的中间位置baseline和flex-start等效stretch拉伸要想让拉伸起作用前提是子元素不能定宽度或者高度。设置子元素是否换行flex-wrap: nowrap | wrap | wrap-reverse;nowrap不换行wrap换行wrap-reverse反向换行换行之后行间距自动分配行间距比较大多行对齐方式对于单行子元素该属性不起作用。align-content: flex-start | flex-end | center | space-between | space-around | stretch;align-content在侧轴上执行样式的时候会把默认的间距给合并。对于单行子元素该属性不起作用flex-start侧轴开始位置对其没有行间距flex-end侧轴结束位置对其没有行间距center侧轴中间位置对其没有行间距space-between2端对齐中间自动分配space-around自动分配间距设置在子元素上的属性:align-self控制自己在侧轴的对齐方式auto默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 stretchstretch元素被拉伸以适应容器。如果没有宽度、高度center侧轴的居中位置flex-start侧轴的开始位置flex-end侧轴的结束位置baseline侧轴的基线位置实现效果与开始位置一样order:排序控制子元素的排列顺序数字越大越往后排默认0支持负数flex设置子元素如何分配空间flex1把剩余空间全部分配给当前元素如果每一个子元素都有flex1那就是平均分配如果有3个子元素分别设置flex1、flex2、flex3。那么就是把整个盒子分成了6份第一个占1份第二个占2份第三个占3份。flex-shrink元素是否挤压一般用于制作移动端的横向滚动。0不挤压1挤压默认值gap属性:CSS Grid 布局这是gap最经典的用法用来控制网格轨道行与行、列与列之间的间距。css.grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px 10px; /* 行间距20px列间距10px */ }Flexbox 布局在现代浏览器中gap已经完全支持 Flexbox用来控制 flex 项目在主轴和交叉轴上的间距。css.flex-container { display: flex; flex-wrap: wrap; gap: 16px; /* 项目之间水平和垂直间距都是16px */ }多列布局在column-count或column-width布局中gap或column-gap控制列与列之间的间距。css.newspaper { column-count: 3; gap: 40px; /* 列间距为40px */ }