你好,我是小白Coding日志,一个热爱技术的程序员。在这里,我分享自己在编程和技术世界中的学习心得和体会。希望我的文章能够给你带来一些灵感和帮助。欢迎来到我的博客,一起在技术的世界里探索前行吧!
基础概念
Flexbox布局的概念
Flexbox布局是一种布局的模式,用来在一个维度上为项目设置布局
容器
在HTML中大多数元素例如div
、ul
、main
块元素,span
、em
、i
行内元素都可以作为Flex容器,它的作用是开启一个Flex布局模式,你只需要在元素上面设置display: flex
即可开启一个Flex布局容器。
项目
当开启一个Flex布局的时候,容器中的一个个元素::before
、::after
、文本、dom元素就是项目,这些项目是容器的子元素,他们之间是父子关系,子元素也可以开启自己独立的Flex布局,他不会继承父元素的flex属性。
xml
<div class="container">
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
</div>
<!-- 开启Flex布局 -->
.container {
display: flex;
width: 300px;
height: 200px;
background-color: #8a8282;
}
主轴、侧轴
在Flex中容器有两个轴分别是主轴 和侧轴 ,默认情况下主轴沿着行的方向分布,侧轴沿着列的方向分布。有一点需要注意,主轴和侧轴的方向并不是固定不变的而是要受到flex-direction
和writing-mode
或者direction
阅读模式的影响
容器大小:主轴尺寸、侧轴尺寸
Flex容器的大小是由主轴尺寸或者侧轴尺寸决定的,主轴的尺寸:主轴开始位置到主轴结束位置的距离,侧抽尺寸:侧轴的开始位置到侧轴的结束位置的距离。
flex-direction控制项目的方向
flex-direction属性用来控制主轴上项目的排布方向,默认是row
即按照行内的方式在一行排列,如果想让元素按照块的方式在一列显示则可以设置flex-direction: column``row-reverse
和column-reverse
可以使主轴(或者侧轴)的起点和终点位置互换
flex-wrap控制项目换行
flex-wrap用来控制项目的换行,默认情况下是不换行的flex-wrap: nowrap
,即使项目已经溢出容器了它也保持一行排列,如果想让容器中的项目在一行容纳不下后进行强制换行显示可以设置flex-wrap: wrap
,wrap-reverse
也会让项目换行只不过他的方向是相反的,例如wrap
会让换行元素排列到下一行,而wrap-reverse
会让换行元素排列到当前行的上一行去,如下👇
xml
<style>
.container {
width: 400px;
background-color: #ddb6d8;
display: flex;
gap: 10px;
border: 1px solid #0a57e7;
flex-wrap: wrap-reverse;
}
.container div{
width: 100px;
height: 100px;
background-color: #c9df0b;
text-align: center;
line-height: 100px;
}
</style>
<div class="container">
<div>itm1</div>
<div>itm2</div>
<div>itm3</div>
<div>itm4</div>
</div>
order 项目排序
order
属性是设置在容器中项目上面的,可以用来为项目进行排序,order
的值越小当前元素越排在最前面,可以是正值也可以是负值。如果遇到两个order
值相同的元素会按照实际文档上的顺序进行排列
gap项目之间的间距
gap
用来设置项目之间的间距,只需要在flex容器上设置gap
属性即可,接收两个值,如果只设置一个值的话,那么第二个值和第一个值等同,如果两个值都设置了,第一个值是row-gap
行的间距,第二个则是column-gap
列的间距
最后还是那句话:即使代码逻辑很简单,也值得记录下来。我的编程目标是避免重复造轮子!😊
如果觉得有用,就给我点个赞吧😁