玄子Share-CSS3 弹性布局知识手册

玄子Share-CSS3 弹性布局知识手册

Flexbox Layout（弹性盒布局）是一种在 CSS 中用于设计复杂布局结构的模型。它提供了更加高效、简便的方式来对容器内的子元素进行排列、对齐和分布

主轴和交叉轴

使用弹性布局，最重要的一个概念就是主轴与交叉轴（副轴，侧轴），主轴由flex-direction定义，另一根轴垂直于它

  • 主轴（Main Axis）：弹性容器的主要方向，可以是水平方向或垂直方向
  • 交叉轴（Cross Axis）：与主轴垂直的轴线，如果主轴是水平方向，那么交叉轴就是垂直方向，反之亦然

这里一定不要主观认为，主轴就是横向（水平），交叉轴就是纵向的（垂直），主轴是水平还是垂直排列，以及justify-content与align-items等样式的排列方向，都是由主轴方向flex-direction来定义的

弹性容器属性

弹性容器属性，设置在需要开启弹性布局的容器中，也就是父级容器

  • display：定义弹性容器表现形式
    • flex：块级弹性容器
    • inline-flex：行内弹性容器
  • flex-direction：定义主轴的排列方向
    • row：主轴排列方向为行排列横向（默认值）
    • row-reverse：主轴排列方向为行排列横向并翻转左右顺序
    • column：主轴排列方向为列排列纵向
    • column-reverse：主轴排列方向为列排列纵向并翻转上下顺序
  • flex-wrap：定义子容器宽度在超出父容器宽度时，子容器是否自动换行
    • nowrap：子容器在超出父容器宽度时不允许自动换行（默认值）
    • wrap：子容器在超出父容器宽度时允许自动换行
    • wrap-reverse：子容器在超出父容器宽度时允许自动换行并翻转两行顺序
  • flex-flow：flex-direction 和 flex-wrap 的简写形式
    • row：只写单个 flex-direction 值，表示排列方式与关键词一致，不换行
    • wrap：只写单个 flex-wrap值，表示排列方式为横向排列，换行行为与关键词一致
    • flex-flow: row nowrap：主轴为行排列，子容器不换行
    • flex-flow: column wrap：主轴为列排列，子容器允许换行
    • flex-flow: row-reverse wrap-reverse：主轴为行排列并反向排列，子容器允许换行且反向排列
    • 为保证代码的易读性，在编写代码时，推荐使用拆分形式书写
  • justify-content：定义子容器在主轴上的对齐方式
    • flex-start：子容器向主轴开始位置对齐
    • flex-end：子容器向主轴结束位置对齐
    • center：子容器在主轴上居中对齐
    • space-between：子容器在主轴上平均分布，首尾没有空隙
    • space-around：子容器在主轴上平均分布，每个子容器两侧有空隙
    • space-evenly：子容器在主轴上平均分布，每个子容器两侧和首尾都有空隙
  • align-items： 定义子容器在交叉轴上的对齐方式
    • flex-start：子容器向交叉轴开始位置对齐
    • flex-end：子容器向交叉轴结束位置对齐
    • center：子容器在交叉轴上居中对齐
    • baseline：子容器的基线对齐
    • stretch：子容器在交叉轴上拉伸以适应容器高度
  • align-content： 定义子容器在多轴（多行）上的对齐方式，此样式只在开启 flex-wrap 自动换行时生效
    • flex-start：子容器在多轴上向交叉轴开始位置对齐
    • lex-end：子容器在多轴上向交叉轴结束位置对齐
    • center：子容器在多轴上居中对齐
    • space-between：子容器在多轴上平均分布，首尾没有空隙
    • space-around：子容器在多轴上平均分布，每个子容器两侧有空隙
    • space-evenly：子容器在多轴上平均分布，每个子容器两侧和首尾都有空隙
    • stretch：子容器在多轴上拉伸以适应容器高度

弹性项目属性

弹性项目属性，设置在已经开启弹性布局的弹性项目中，也就是子级容器

  • order：定义项目的排列顺序
    • 正整数： 定义项目的排列顺序，数值越小，排列越靠前
    • 负整数： 同上，数值越小，排列越靠前
  • flex-grow：定义项目在分配多余空间时的放大比例
    • 0：项目在空间充足时不会放大（默认值）
    • 数值：定义项目在分配多余空间时的相对增长比例，数值越大，分配到的空间越多
  • flex-shrink：定义项目在空间不足时的缩小比例
    • 1：项目在空间不足时会按照相等的比例缩小（默认值）
    • 数值：定义项目在空间不足时的相对缩小比例，数值越大，缩小得越多
  • flex-basis：定义项目在分配多余空间之前的基准值
    • auot：项目在分配多余空间之前自动调整基准大小（默认值）
    • 长度值或百分比：指定项目在分配多余空间之前的基准大小
  • flex：flex-grow、flex-shrink 和 flex-basis 的简写形式
    • 0 1 auto：等于flex-grow：0，flex-shrink：1，flex-basis：auto，项目在分配多余空间时不会相对增长，项目在空间不足时会相对收缩（默认值）
    • 1： 等于flex-grow：1，flex-shrink：1，flex-basis：0%，项目会在分配多余空间时会相对增长，空间不足时会相对收缩
    • 200px： 等于flex-grow：1，flex-shrink：1，flex-basis：200px，项目在分配多余空间时会相对增长，空间不足时会相对收缩，默认大小200px
    • none：等于flex-grow：0，flex-shrink：0，flex-basis：auto，项目在分配多余空间时不会相对增长，项目在空间不足时不会相对收缩
    • auto： 等于flex-grow：1，flex-shrink：1，flex-basis：auto，项目会在分配多余空间时会相对增长，空间不足时会相对收缩
    • 在实际开发中，建议优先使用 Flex 属性，这样写有利于浏览器渲染
  • align-self：设置单个子元素在交叉轴上的对齐方式，覆盖父容器的 align-items 属性
    • flex-start：单个项目向交叉轴开始位置对齐
    • flex-end：单个项目向交叉轴结束位置对齐
    • center：单个项目在交叉轴上居中对齐
    • baseline：单个项目的基线对齐
    • stretch：单个项目在交叉轴上拉伸以适应容器高度

演示示例模板

下面我将使用这个示例模板来进行，弹性布局的效果演示（后续示例仅展示关键代码）

  • #app：定义了一个页面底板并使用弹性布局设置在页面中央位置（仅用于布局无意义）
  • .container：定义了一个弹性容器，它的子元素.item会沿着主轴横向排列，使用容器右下角的按钮可快捷调整容器大小
  • .item：定义了.container子容器的样式，用于演示示例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>玄子Share-弹性布局演示案例</title><style>#app {width: 90vw;height: 90vh;margin: 0 auto;padding: 20px;background-color: #EAEAEA;display: flex;flex-direction: column;align-items: center;/*以上为演示案例的底板样式，仅用于布局无意义*/}.container {width: 600px;height: 300px;background-color: darkgray;overflow: auto;resize: both;/*通过 resize 样式自由调整演示容器大小*//*=======Flex=======*/display: flex;}.item {width: 100px;height: 100px;margin: 5px;text-align: center;line-height: 100px;border: 1px solid blue;background-color: turquoise;/*=======Flex=======*/}</style>
</head>
<body>
<div id="app"><h1>玄子Share-弹性布局演示案例</h1><div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div></div>
</div>
</body>
</html>

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

通过调整.container的尺寸可以观察到，当父级容器空间不足时，子元素的宽度会被挤压，以容下子元素

弹性容器演示

flex-direction
.container {/*=======Flex=======*/display: flex;flex-direction: row;
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

flex-direction: row可以看到这个属性的效果，和默认只写一个display: flex的效果是一致的，子元素从左到右依次排列（默认效果）

.container {/*=======Flex=======*/display: flex;flex-direction: row-reverse;
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

flex-direction: row-reverse这个属性的效果，和flex-direction: row的效果是相反的，子元素从右到左依次排列，并翻转子元素的顺序

.container {height: 600px;/*=======Flex=======*/display: flex;flex-direction: column;
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

flex-direction: column这个属性的效果为，子元素从上到下依次排列

.container {height: 600px;/*=======Flex=======*/display: flex;flex-direction: row-reverse;
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

flex-direction: column-reverse这个属性的效果，和flex-direction: column的效果是相反的，子元素从下到上依次排列，并翻转子元素的顺序

flex-wrap
.container {/*=======Flex=======*/display: flex;flex-direction: row;flex-wrap: nowrap;
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

flex-wrap: nowrap这个属性的效果与，只写一个display: flex效果一致，如果父容器宽度不足，则会挤压子元素宽度（默认效果）

.container {/*=======Flex=======*/display: flex;flex-direction: row;flex-wrap: wrap;
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

flex-wrap: wrap这个属性的效果为，当父容器宽度不足时，子元素会自动换行，如果父容器宽度实在不足，则会挤压子元素宽度

.container {/*=======Flex=======*/display: flex;flex-direction: row;flex-wrap: wrap-reverse;
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

flex-wrap: wrap-reverse这个属性的效果为，当父容器宽度不足时，子元素会自动换行，但换行效果是反向的即从下到上换行

flex-flow
.container {/*=======Flex=======*/display: flex;flex-flow: row wrap;
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

flex-flow: column wrap这个属性是flex-direction与flex-wrap的简写形式，当前样式表示，主轴横向排列，自动换行

.container {/*=======Flex=======*/display: flex;flex-flow: row wrap;
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

flex-flow: column wrap当前样式表示，主轴纵向排列，自动换行

.container {/*=======Flex=======*/display: flex;flex-flow: row;
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

flex-flow: row若只写一个flex-direction的关键字，则遵守flex-direction关键字的规则

.container {/*=======Flex=======*/display: flex;flex-flow: wrap;
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

flex-flow: wrap若只写一个flex-wrap的关键字，则flex-direction排列方向为默认横向排列，换行行为遵守flex-wrap关键字的规则

justify-content
.container {/*=======Flex=======*/display: flex;flex-direction: row;flex-wrap: wrap;justify-content: flex-start;
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

justify-content: flex-start这个属性的效果，与flex-direction：row的默认效果一致，子元素沿主轴方向，依次排列（默认效果）

.container {/*=======Flex=======*/display: flex;flex-direction: row;flex-wrap: wrap;justify-content: flex-end;
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

justify-content: flex-end这个属性的效果，与justify-content: flex-start的效果相反，子元素沿主轴反方向，依次排列

.container {/*=======Flex=======*/display: flex;flex-direction: row;flex-wrap: wrap;justify-content: center;
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

justify-content: center这个属性的效果为，子元素沿主轴方向居中对齐并，依次排列

.container {/*=======Flex=======*/display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-between;
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

justify-content: space-between这个属性的效果为，子元素沿主轴方向，两端子元素对齐边距，中间子元素等量分配剩余空间，依次排列

.container {/*=======Flex=======*/display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-around;
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

justify-content: space-around这个属性的效果为，子元素沿主轴方向，每个子元素等量分配剩余空间到左右两侧，依次排列

.container {/*=======Flex=======*/display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-evenly;
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

justify-content: space-evenly这个属性的效果为，子元素沿主轴方向，每个子元素等量分配剩余空间，依次排列

.container {/*=======Flex=======*/display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-evenly;
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

设置justify-content与flex-wrap: wrap属性后，父容器宽度不足时，子容器自动换行，换行后子容器排列，并遵守justify-content的规则

.container {/*=======Flex=======*/display: flex;flex-direction: column;flex-wrap: wrap;justify-content: space-evenly;
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

flex-direction: column当主轴为纵轴时，子元素排列方向依照主轴纵向排列，并遵守justify-content的规则，（主轴）纵向等距对齐

align-items
.container {/*=======Flex=======*/display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-evenly;align-items: flex-start;
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

align-items: flex-start这个属性的样式与默认效果一致，子元素沿侧轴顶部对齐

.container {/*=======Flex=======*/display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-evenly;align-items: flex-end;
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

align-items: flex-end这个属性的样式与默认效果相反，子元素沿侧轴底部对齐

.container {/*=======Flex=======*/display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-evenly;align-items: center;
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

align-items: center这个属性的样式为，子元素沿侧轴中心位置对齐

.container {/*=======Flex=======*/display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-evenly;align-items: baseline;
}.item:first-child {width: 200px;height: 200px;line-height: 200px;
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

align-items: baseline这个属性的样式为，子元素沿侧轴中，高度最高的子元素的中心位置为基线对齐

.container {/*=======Flex=======*/display: flex;flex-direction: column;flex-wrap: wrap;justify-content: space-evenly;align-items: center;
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

flex-direction: column当主轴为纵轴时，子元素排列方向依照主轴纵向排列，并遵守align-items: center的规则，（侧轴）横向居中对齐

align-content
.container {/*=======Flex=======*/display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-evenly;align-items: center;align-content: flex-start;
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

align-content: flex-start表示在多轴情况下，侧轴的对齐方式为顶部对齐（只有在开启flex-wrap换行后才有多轴，否则此样式无效）

.container {/*=======Flex=======*/display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-evenly;align-items: center;align-content: center;
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

align-content: center表示在多轴情况下，侧轴的对齐方式为居中对齐（只有在开启flex-wrap换行后才有多轴，否则此样式无效）

.container {/*=======Flex=======*/display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-evenly;align-items: center;align-content: flex-end;
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

align-content: flex-end表示在多轴情况下，侧轴的对齐方式为底部对齐（只有在开启flex-wrap换行后才有多轴，否则此样式无效）

.container {/*=======Flex=======*/display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-evenly;align-items: center;align-content: space-around;
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

align-content: space-around表示在多轴情况下，子元素沿主侧方向，每行子元素等量分配剩余空间到侧轴两侧，依次排列

.container {/*=======Flex=======*/display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-evenly;align-items: center;align-content: space-between;
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

align-content: space-between表示在多轴情况下，子元素沿侧轴方向，两端子元素对齐边距，中间子元素等量分配剩余空间，依次排列

​

.container {/*=======Flex=======*/display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-evenly;align-items: center;align-content: space-evenly;
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

align-content: space-evenly表示在多轴情况下，子元素沿主侧方向，每行子元素等量分配剩余空间，依次排列

弹性项目演示

order
.container {width: 600px;height: 300px;background-color: darkgray;overflow: auto;resize: both;/*通过 resize 样式自由调整演示容器大小*//*=======Flex=======*/display: flex;flex-direction: row;justify-content: space-evenly;align-items: center;
}.item {width: 100px;height: 100px;margin: 5px;text-align: center;line-height: 100px;border: 1px solid blue;background-color: turquoise;/*=======Flex=======*/
}.item:nth-of-type(1) {order: 5;
}.item:nth-of-type(5) {order: -1;
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

order: 数值单独设置子元素的排列循序，按主轴方法计算大小，可为负数

flex-grow
.item:nth-of-type(1) {flex-grow: 1;
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

flex-grow: 1表示在父容器剩余空间充裕时，子元素将自动放大自身以填充剩余空间，默认为0及不放大自身

flex-shrink
.item:nth-of-type(1) {flex-shrink: 0;
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

flex-shrink: 0表示在父容器剩余空间不足时，子元素将不会缩小自身大小以适应空间，默认为0及自动缩小自身

flex-basis
.item:nth-of-type(1) {flex-basis: 200px;
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

flex-basis: 200px表示项目默认初始大小为200px，默认为auto自动调整

flex
.item:nth-of-type(1) {flex: 0 1 auto;
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

flex: 0 1 auto表示项目在分配多余空间时不会相对增长，项目在空间不足时会相对收缩（默认值）

.item:nth-of-type(1) {flex: auto;
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

flex: auto表示项目会在分配多余空间时会相对增长，空间不足时会相对收缩

.item:nth-of-type(1) {flex: none;
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

flex: none表示项目在分配多余空间时不会相对增长，项目在空间不足时不会相对收缩

.item:nth-of-type(1) {flex: 1;
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

flex: 1表示项目会在分配多余空间时会相对增长，空间不足时会相对收缩

​

.item:nth-of-type(1) {flex: 200px;
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

flex: 200px表示项目在分配多余空间时会相对增长，空间不足时会相对收缩，默认大小200px

align-self
.item:nth-of-type(1) {align-self: flex-start;
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

align-self: flex-start设置单个子元素在侧轴上的对齐方式为顶对齐，会覆盖掉父容器的align-items属性

.item:nth-of-type(1) {align-self: flex-start;
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

align-self: center设置单个子元素在侧轴上的对齐方式为居中对齐，会覆盖掉父容器的align-items属性

.item:nth-of-type(1) {align-self: flex-start;
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

align-self: flex-end设置单个子元素在侧轴上的对齐方式为底对齐，会覆盖掉父容器的align-items属性

弹性布局案例

后台页面布局

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>* {margin: 0;padding: 0;}#app {margin: 0 auto;width: 100vw;height: 100vh;display: flex;flex-direction: column;}header {width: 100%;height: 10%;background-color: yellow;display: flex;flex-direction: row;/*gap: 5px;*/}header .logo {width: 100px;height: 100px;background-color: blue;}header nav {width: 100px;height: 100px;background-color: blue;}header .user {width: 100px;height: 100px;background-color: blue;margin-left: auto;}section {width: 100%;height: 86%;display: flex;flex-direction: row;overflow: hidden;}section aside {width: 210px;height: 100%;background-color: red;}section main {width: 100%;height: 100%;overflow: auto;}section main .container {background-color: pink;padding: 20px;overflow: auto;}footer {width: 100%;height: 4%;background-color: turquoise;display: flex;justify-content: center;align-items: center;}</style>
</head>
<body>
<div id="app"><header><div class="logo"></div><nav></nav><div class="user"></div></header><section><aside></aside><main><div class="container"><div style="width: 100px; height:1200px;background-color: rgba(153,153,153,0.8)"></div></div></main></section><footer><a href="https://www.xuanzishare.com/">Copyright © xuanzishare.com. All Rights Reserved.</a></footer>
</div>
</body>
</html>
圣杯页面布局

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>* {margin: 0;padding: 0;}#app {margin: 0 auto;width: 100vw;height: 100vh;display: flex;flex-direction: column;}header, footer {width: 100%;height: 8%;background-color: red;}section {width: 100%;height: 84%;background-color: orange;display: flex;flex-direction: row;}section aside:first-child {width: 10%;height: 100%;background-color: pink;}section main {width: 80%;height: 100%;background-color: green;}section aside:last-child {width: 10%;height: 100%;background-color: pink;}</style>
<body>
<div id="app"><header></header><section><aside></aside><main></main><aside></aside></section><footer></footer>
</div>
</body>
版心页面布局

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>* {margin: 0;padding: 0;}#app {width: 100%;height: 100%;display: flex;flex-direction: column;align-items: center;}header {position: fixed;width: 100%;height: 50px;background-color: red;}section {width: 80%;height: 1800px;background-color: orange;}footer {width: 100%;height: 50px;background-color: red;}</style>
<body>
<div id="app"><header></header><section></section><footer></footer>
</div>
</body>

玄子Share-CSS3 弹性布局知识手册 23.11.30

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/211033.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

从零开始训练一个ChatGPT大模型（低资源，1B3）

从零开始训练一个ChatGPT大模型（低资源，1B3）

macrogpt-prertrain 大模型全量预训练(1b3), 多卡deepspeed/单卡adafactor 源码地址&#xff1a;https://github.com/yongzhuo/MacroGPT-Pretrain.git 踩坑 1. 数据类型fp16不太行, 很容易就Nan了, 最好是fp32, tf32, 2. 单卡如果显存不够, 可以用优化器adafactor, 3. 如果…
阅读更多...
【Go】protobuf介绍及安装

【Go】protobuf介绍及安装

目录 一、Protobuf介绍 1.Protobuf用来做什么 2. Protobuf的序列化与反序列化 3. Protobuf的优点和缺点 4. RPC介绍 <1>文档规范 <2>消息编码 <3>传输协议 <4>传输性能 <5>传输形式 <6>浏览器的支持度 <7>消息的可读性和…
阅读更多...
graphics.h安装后依旧报错

graphics.h安装后依旧报错

问题解决一&#xff1a; 我在网上找了很多&#xff0c;都说找到graphics.h这个文件&#xff0c;放到include这个目录下&#xff0c;我照做了&#xff0c;然后 当我进行编译时&#xff0c;自动跳到graphics.h这个文件并出现一堆报错 问题解决二&#xff1a; 看一下这两个文件是…
阅读更多...
Windows11亮度调节滑块消失不见，如何解决

Windows11亮度调节滑块消失不见，如何解决

电脑亮度调节滑块消失&#xff0c;键盘F6&#xff0c;F7亮度调节失效&#xff0c;系统-屏幕-亮度和颜色-亮度调节消失不见 1.首先winR ,输入regedit打开注册表编辑器 2.在注册表编辑器中依次点击(红橙黄绿青蓝紫) “计算机\HKEY_LOCAL_MACHINE\SYSTEM\ControlSet001\Control\Cl…
阅读更多...
CFS三层靶机内网渗透

CFS三层靶机内网渗透

CFS三层靶机内网渗透 一、靶场搭建1.基础参数信息2.靶场搭建2.1网卡配置2.2Target1配置2.2.1 网卡配置2.2.2 Target1 BT配置 2.3Target2配置2.3.1 网卡配置2.3.2 Target2 BT配置 2.4Target3配置 二、内网渗透Target11.1信息收集1.1.1IP收集1.1.2端口收集1.1.3目录收集 1.2 webs…
阅读更多...
CentOS最小化安装后怎么转图形界面/可视化桌面？

CentOS最小化安装后怎么转图形界面/可视化桌面？

文章目录 1、命令行和图形界面切换方式一方式二 2、最小化安装转桌面1-设置网络2-测试网络3-更新文件4-安装图形5-查看默认6-设置默认 界面效果参考视频 1、命令行和图形界面切换 如果安装的是最小化&#xff0c;那么init 5 (进入图像化桌面)命令是无效的 方式一 1.如果在命…
阅读更多...
【计算机网络】15、NAT、NAPT 网络地址转换、打洞

【计算机网络】15、NAT、NAPT 网络地址转换、打洞

文章目录 一、概念二、分类&#xff08;主要是传统 NAT&#xff09;2.1 基本 NAT2.2 NAPT 三、访问NAT下的内网设备的方式3.1 多拨3.2 端口转发、DMZ3.3 UPnP IGD、NAT-PMP3.4 服务器中转&#xff1a;frp 内网穿透3.4.1 NAT 打洞3.4.2 NAT 类型与打洞成功率3.4.2.1 完全圆锥形 …
阅读更多...
基于hadoop下的hbase安装

基于hadoop下的hbase安装

简介 HBase是一个分布式的、面向列的开源数据库&#xff0c;该技术来源于Fay Chang所撰写的Google论文“Bigtable&#xff1a;一个结构化数据的分布式存储系统”。就像Bigtable利用了Google文件系统&#xff08;File System&#xff09;所提供的分布式数据存储一样&#xff0c;…
阅读更多...
nodejs+vue+ElementUi酒店餐饮客房点餐管理系统

nodejs+vue+ElementUi酒店餐饮客房点餐管理系统

系统非功能需求&#xff0c;只能是为了满足客户需求之外的非功能性要求。系统需要具有数据完整性验证的功能&#xff0c;对界面上非法的数据和不完整的数据进行提示&#xff0c;不能直接保存到数据库中&#xff0c;造成不完整性因素。运行软件:vscode 前端nodejsvueElementUi 语…
阅读更多...
VSCode 开发C/C++实用插件分享——codegeex

VSCode 开发C/C++实用插件分享——codegeex

VSCode 开发C/C实用插件分享——codegeex 一、codegeex 一、codegeex CodeGeeX 智能编程助手是一款编程插件&#xff0c;CodeGeeX支持多种主流IDE&#xff0c;如VS Code、IntelliJ IDEA、PyCharm、Vim等&#xff0c;同时&#xff0c;支持Python、Java、C/C、JavaScript、Go等多…
阅读更多...
LeetCode 2477. 到达首都的最少油耗：深度优先搜索(DFS)

LeetCode 2477. 到达首都的最少油耗：深度优先搜索(DFS)

【LetMeFly】2477.到达首都的最少油耗&#xff1a;深度优先搜索(DFS) 力扣题目链接&#xff1a;https://leetcode.cn/problems/minimum-fuel-cost-to-report-to-the-capital/ 给你一棵 n 个节点的树&#xff08;一个无向、连通、无环图&#xff09;&#xff0c;每个节点表示一…
阅读更多...
Doris 集成 ElasticSearch

Doris 集成 ElasticSearch

Doris-On-ES将Doris的分布式查询规划能力和ES(Elasticsearch)的全文检索能力相结合，提供更完善的OLAP分析场景解决方案： （1）ES中的多index分布式Join查询 （2）Doris和ES中的表联合查询，更复杂的全文检索过滤 1 原理 （1）创建ES外表后，FE会请求建表指定的主机，获取所有…
阅读更多...
Azure Machine Learning - 使用 Azure OpenAI 服务生成文本

Azure Machine Learning - 使用 Azure OpenAI 服务生成文本

使用 Azure OpenAI 服务生成文本 关注TechLead&#xff0c;分享AI全维度知识。作者拥有10年互联网服务架构、AI产品研发经验、团队管理经验&#xff0c;同济本复旦硕&#xff0c;复旦机器人智能实验室成员&#xff0c;阿里云认证的资深架构师&#xff0c;项目管理专业人士&…
阅读更多...
一文读懂中间件

一文读懂中间件

前言&#xff1a;在程序猿的日常工作中&#xff0c; 经常会提到中间件&#xff0c;然而大家对中间件的理解并不一致&#xff0c;导致了一些不必要的分歧和误解。“中间件”一词被用来描述各种各样的软件产品&#xff0c;在不同文献中有着许多不同的中间件定义&#xff0c;包括操…
阅读更多...
Linux--初识和基本的指令（3）

Linux--初识和基本的指令（3）

目录 1.前言 1.指令 1.1 cat指令 1.2 echo指令 1.3 more 指令 1.4 less指令 1.5 什么时候使用less和more 1.6 head指令 1.7 tail指令 1.8 wc指令 1.9 与时间相关的指令 1.9.1 date指令 1.9.2 cal指令 1.10 16.find指令&#xff1a;&#xff08;灰常重要&#x…
阅读更多...
RPG项目01_脚本代码

RPG项目01_脚本代码

基于“RPG项目01_场景及人物动画管理器”&#xff0c;我们创建一个XML文档 在资源文件夹下创建一个文件夹&#xff0c; 命名为Xml 将Xnl文档拖拽至文件夹中&#xff0c; 再在文件夹的Manager下新建脚本LoadManager 写代码&#xff1a; using System.Collections; using System…
阅读更多...
7、Qt延时的使用

7、Qt延时的使用

一、说明 平时用到两种延时方式QThread::sleep()和QTimer::singleShot() 1、QThread::sleep() QThread类中如下三个静态函数&#xff1a; QThread::sleep(n); //延迟n秒 QThread::msleep(n); //延迟n毫秒 QThread::usleep(n); //延迟n微妙 这种方式使用简单&#xff0c;但是会阻…
阅读更多...
四.多表查询

四.多表查询

多表查询 1.一个案例引发的多表连接1.1案例说明1.2 笛卡尔积&#xff08;或交叉连接&#xff09;的理解1.3案例分析与问题解决 2.多表查询分类讲解分类1&#xff1a;等值连接vs非等值连接分类2&#xff1a;自连接vs非自连接分类3&#xff1a;内连接vs外连接 3.SQL99语法实现多表…
阅读更多...
【【FPGA 之 MicroBlaze XADC 实验】】

【【FPGA 之 MicroBlaze XADC 实验】】

FPGA 之 MicroBlaze XADC 实验 Vivado IP 核提供了 XADC 软核&#xff0c;XADC 包含两个模数转换器&#xff08;ADC&#xff09;&#xff0c;一个模拟多路复用器&#xff0c;片上温度和片上电压传感器等。我们可以利用这个模块监测芯片温度和供电电压&#xff0c;也可以用来测…
阅读更多...
在AWS Lambda上部署标准FFmpeg工具——自定义层的方案

在AWS Lambda上部署标准FFmpeg工具——自定义层的方案

大纲 1 确定Lambda运行时环境1.1 Lambda系统、镜像、内核版本1.2 运行时1.2.1 Python1.2.2 Java 2 打包FFmpeg3 创建Lambda的Layer4 测试4.1 创建Lambda函数4.2 附加FFmpeg层4.3 添加测试代码4.4 运行测试 参考文献 FFmpeg被广泛应用于音/视频流处理领域。对于简单的需求&#…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023