flex布局

最新推荐文章于 2024-10-08 09:33:56 发布

HuJNi_

最新推荐文章于 2024-10-08 09:33:56 发布

阅读量67

点赞数

分类专栏：笔记文章标签： css html

本文链接：https://blog.csdn.net/weixin_52148489/article/details/111868387

版权

笔记专栏收录该内容

24 篇文章 0 订阅

订阅专栏

给父盒子加:
display: flex;
改变主轴:
flex-direction: row;
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;
主轴上的:
justify-content: flex-start;主轴开始位置
justify-content: flex-end;主轴结束位置
justify-content: center;中间位置
justify-content: space-between;两端对齐
justify-content: space-around;分散对齐（拉手对齐）
单行:
align-items: flex-start;开始
align-items: center;中间
align-items: flex-end;结束
多行:
align-content: flex-start;默认值，从交叉轴的开始位置
align-content: fiex-end;从交叉轴的结束位置
align-content: center;从中间位置
align-content: space-between;两端对齐
align-content: space-around;拉手对齐
换行:
flex-wrap: wrap;换行
flex-wrap: nowrap;不换行
flex-wrap: wrap-reverse;反向换行