这篇博客介绍了CSS中的布局技巧，包括如何处理元素的单行和多行溢出，以及使用Flexbox进行灵活的布局排列。详细讲解了flex-direction属性的各种用法，如column-reverse、row等。同时，还探讨了flex-wrap属性在自动换行和换行方向上的应用。此外，文章还提到了justify-content和align-items属性在调整Flexbox容器内元素的水平和垂直对齐方式上的作用。
溢出
单行溢出
多行溢出
不管是单行溢出还是多行溢出都要设置宽度
flex排序
display: flex;
flex-direction: column-reverse; 列，反序排列，对应下图第一个
flex-direction: column;列，对应下图第二个
flex-direction: row-reverse;行，反序排列，对应下图第四个
flex-direction: row;行排列，对应下图第三个
flex换行
display: flex;
flex-wrap: wrap;自动换行
flex-wrap: nowrap;不换行换行，默认不换行
flex-wrap: wrap-reverse;换行，反序排列
Flex左右布局
display: flex;
justify-content: center;居中对齐
justify-content: space-between;两端对齐
justify-content: flex-end;居右对齐
justify-content: flex-start;居左对齐
justify-content: space-around;平均对齐
flex上下布局
display: flex;
align-items: center;上下居中
align-items: flex-start;上对齐
align-items: flex-end;下对齐
align-items:stretch;拉伸对齐
align-items: baseline;字体在一行
给DIV增加手形标识符
.nav>div:honer{ }
哪个DIV需要就加在哪个DIV
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
