flex和grid布局

原创已于 2025-01-19 00:16:44 修改 · 1.3k 阅读

32 ·

CC 4.0 BY-SA版权

文章标签：

#数据结构

于 2025-01-17 22:42:31 首次发布

flex布局

1.如何触发弹性盒子

给父元素添加display属性；取值flex

1）父元素触发弹性盒子之后，子元素默认横向显示

父元素触发弹性盒子之后，子元素会横向显示，类似于浮动，但不是浮动，与浮动没有关系，

不会影响孙子辈份的元素

2）触发弹性盒子之后，会改变子元素的元素类型，会让子元素变成块级元素

3）触发弹性盒子之后，如果之后一个子元素，给子元素添加margin：auto的时候，子元素会水平居中位置显示

2.修改主轴方向

属性：flex-direction

row============主轴在横向，并且以开始位置显示（*）

row-reverse====主轴在横向，并且以相反方向位置开始显示

column=========主轴在纵向，并且以开始位置显示（*）

column-reverse=主轴在纵向，并且以相反方向位置开始显示

3.主轴对齐方式

属性：justify-content:用来调整主轴上面的对齐方式（间距）

flex-start======主轴的开始位置显示（项目与项目之间没有间距）

flex-end========主轴的结束位置显示（项目与项目之间没有间距）

center==========主轴的居中位置显示（项目与项目之间没有间距）

space-around====主轴的两端环绕，项目与项目之间距离是守卫项目与容器之间的2倍

space-between===主轴的两端对齐

space-evenly====主轴的间距平分

4.侧轴对齐方式

属性：align-items:用于调整侧轴上面的项目对齐方式

flex-start===侧轴的开始位置显示

flex-end=====侧轴的结束位置显示

center=======侧轴的居中位置显示

baseline=====侧轴的基线位置显示效果，效果与开始位置一致，实际开发的时候不会使用该属性

stretch======默认的拉伸效果，前提，项目不需要设置高度

5.折行属性

属性：flex-wrap:是否让元素折行显示

nowrap====不折行，默认就是存在挤压的效果

wrap======折行显示（*）

6.行间距属性

属性：align-content :调整行间距，侧轴上面显示

flex-start======侧轴的开始位置显示（项目与项目之间没有间距）

flex-end========侧轴的结束位置显示（项目与项目之间没有间距）

center==========侧轴的居中位置显示（项目与项目之间没有间距）

space-around====侧轴的两端环绕，项目与项目之间距离是守卫项目与容器之间的2倍

space-between===侧轴的两端对齐

space-evenly====侧轴的间距平分

7.单独侧轴对齐方式

属性：aline-self:用于调整侧轴上面的单独对齐方式

flex-start===项目位于侧轴的开始位置显示

flex-end=====项目位于侧轴的结束位置显示

center=======项目位于侧轴的居中位置显示

baseline=====项目位于侧轴的基线位置显示效果，效果与开始位置一致，实际开发的时候不会使用该属性

stretch======侧轴上面的默认的拉伸效果，前提，项目不需要设置高度

8.调整顺序

属性：order:调整显示顺序

取值可以为正数

可以为负数

取值越大越靠后

取值越小越靠前

order：auto=====0

9.占剩余高度宽度所有

属性：flex:1;

作用：设置占剩余宽度，剩余高度的所有；

前提：如果主轴在横向实现占剩余宽度所有

主轴在纵向的话，占剩余高度所有

如果所有项目都用的flex：1；则实现的是均分的情况

10.自定义是否压缩

flex-shrink: 0; 不压缩

flex-shrink: 1; 压缩

grid布局

1.触发网格

display:grid;

2.划分行列

/* 1）取值为纯数值 */

/* grid-template-columns: 100px 100px 100px;

grid-template-rows: 100px 100px 100px; */

/* 2）取值为百分比 */

/* grid-template-columns: 20% 30% 50%;

grid-template-rows: 100px 100px 100px */

/* 3)重复函数 */

/* grid-template-columns: 20% 20% 20% 20% 20%;

grid-template-rows: 100px 100px 100px;

grid-template-columns: repeat(3,100px);

grid-template-rows: repeat(5,20%); */

/* 4)自动填充 */

/* grid-template-columns: repeat(auto-fill,30%);

grid-template-rows: repeat(3,100px); */

/* 5)auto自动 */

/* grid-template-columns: auto 100px 100px;

grid-template-rows: 100px auto 100px; */

/* 6)片段划分 */

/* grid-template-columns: 100px 100px 100px;

grid-template-rows: 1fr 2fr 3fr; */

/* 7)minmax() */

/* grid-template-columns: 100px 100px 100px;

grid-template-rows: 300px 200px minmax(100px,200px); */

3. 调整间距

/* grid-row-gap: 20px;

grid-column-gap: 30px; */

grid-gap: 20px 30px;

4.调整顺序

grid-auto-flow: column;

5. 项目对齐方式

/* justify-items: center;

align-items: center; */

place-items: center center;

6.网格对齐方式

justify-content: space-around;

align-content: space-around;

place-content: center center;

7.项目属性--合并单元格

/* grid-row-start: 1;

grid-row-end: 2;

grid-column-start:2 ;

grid-column-end: 3; */

grid-column: 2/3;

grid-row: 1/2;