深圳微信网站开发公司,网站建设 总体目标,阿里云做网站用哪个镜像,北京企业官网建设基础概念
Flexbox布局的概念
Flexbox布局是一种布局的模式#xff0c;用来在一个维度上为项目设置布局
容器
在HTML中大多数元素例如div、ul、main块元素#xff0c;span、em、i行内元素都可以作为Flex容器#xff0c;它的作用是开启一个Flex布局模式#xff0c;你只需…基础概念
Flexbox布局的概念
Flexbox布局是一种布局的模式用来在一个维度上为项目设置布局
容器
在HTML中大多数元素例如div、ul、main块元素span、em、i行内元素都可以作为Flex容器它的作用是开启一个Flex布局模式你只需要在元素上面设置display: flex即可开启一个Flex布局容器。
项目
当开启一个Flex布局的时候容器中的一个个元素::before、::after、文本、dom元素就是项目这些项目是容器的子元素他们之间是父子关系子元素也可以开启自己独立的Flex布局他不会继承父元素的flex属性。
div classcontainerdiv1/divdiv1/divdiv1/divdiv1/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: columnrow-reverse和column-reverse可以使主轴或者侧轴的起点和终点位置互换
flex-wrap控制项目换行
flex-wrap用来控制项目的换行默认情况下是不换行的flex-wrap: nowrap即使项目已经溢出容器了它也保持一行排列如果想让容器中的项目在一行容纳不下后进行强制换行显示可以设置flex-wrap: wrap,wrap-reverse也会让项目换行只不过他的方向是相反的例如wrap会让换行元素排列到下一行而wrap-reverse会让换行元素排列到当前行的上一行去如下
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 classcontainerdivitm1/divdivitm2/divdivitm3/divdivitm4/div
/divorder 项目排序
order属性是设置在容器中项目上面的可以用来为项目进行排序order的值越小当前元素越排在最前面可以是正值也可以是负值。如果遇到两个order值相同的元素会按照实际文档上的顺序进行排列
gap项目之间的间距
gap用来设置项目之间的间距只需要在flex容器上设置gap属性即可接收两个值如果只设置一个值的话那么第二个值和第一个值等同如果两个值都设置了第一个值是row-gap行的间距第二个则是column-gap列的间距
