css grid布局居中（css grid flex）

科技前沿 • 2025-05-10 22:53 • 阅读 49

大家好，我是讯享网，很高兴认识大家。

主要运用再移动端

PC端常用传统布局

自适应效果好

flex布局意为：弹性布局，用来为盒模型提供最大的灵活性，任何一个容器都可以指定为flex布局

当我们为父盒子设置flex布局后，子元素的float，clear，vertical-align属性将失效，可以实现元素垂直居中

1、布局原理

讯享网2

2.主轴方向：取决于flex-direction属性的设置

/* 我们的元素是跟着主轴来排列的 */

/* 默认的主轴是X轴也就是行 row 这时y轴就是侧轴*/

/* flex-direction: row; */

/* 简单了解翻转 */

/* flex-direction: row-reverse; */

/* 也可以把主轴设置为y轴，x轴就成了侧轴 */

flex-direction: column;

3、justify-content属性 justify-content: space-between;

/* justify-content: 是设置主轴上子元素的排列方式; */

/* 所以要先确定主轴这里不设置flex-direction属性主轴默认是x轴*/

/* justify-content: flex-start;默认从从左到右 */

/* 让子元素贴到右边，但是顺序不变 */

/* justify-content: end; */

/* 居中显示 */

/* justify-content: center; */

/* 平分剩余空间 */

/* justify-content: space-around; */

/* 最重要的是：先两边贴边，再分配剩余空间 */

/* justify-content: space-between; */

4、flex-wrap

/* 默认是不换行的属性 */

/* flex-wrap: nowrap; */

/* 换行 */

flex-wrap: wrap;

5、align-items设置侧轴的属性

/* 设置侧轴居中 */

align-items: center;

/*了解沿着侧轴拉伸，但是盒子不要给高度*/

align-items: stretch;

和 justify-content属性一起可以实现元素水平垂直都居中的效果

/* 默认的主轴是x轴row */

justify-content: center;

/* 设置侧轴居中 */

align-items: center;

6、align-content设置侧轴子元素排列方式（多行)

这个属性只能用于子项出现换行的情况下，也就是必须要多行，单行是没有效果的。

7、 align-content和align-items的区别

8、flex-flow属性是flex-direction和flex-wrap属性的复合属性

flex-direction: column;

flex-wrap: wrap;

/* 简写 */

flex-flow: column wrap;

1、flex属性

定义子项目分配剩余空间，用flex来表示占多少份数。

例如：flex: 1;就是在剩余空间总占一份的意思，如果只有一个子元素加上这个属性就是它会占剩余全部的空间。有多个子元素的话就是平分剩余空间

当然，某个子元素要多占空间就增大数值就行了，flex: 2;就是占两份

2、align-self属性，控制自己在侧轴上的排列方式

3、order属性，控制排列顺序

使用order属性来控制排列的顺序，数值越小越靠前，默认为0

和z-index不同，z-index数值越大越靠近