CSS布局——Flexbox基础使用

你好,我是小白Coding日志,一个热爱技术的程序员。在这里,我分享自己在编程和技术世界中的学习心得和体会。希望我的文章能够给你带来一些灵感和帮助。欢迎来到我的博客,一起在技术的世界里探索前行吧!

基础概念

Flexbox布局的概念

Flexbox布局是一种布局的模式,用来在一个维度上为项目设置布局

容器

在HTML中大多数元素例如divulmain块元素,spanemi行内元素都可以作为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-directionwriting-mode或者direction 阅读模式的影响

容器大小:主轴尺寸、侧轴尺寸

Flex容器的大小是由主轴尺寸或者侧轴尺寸决定的,主轴的尺寸:主轴开始位置到主轴结束位置的距离,侧抽尺寸:侧轴的开始位置到侧轴的结束位置的距离。

flex-direction控制项目的方向

flex-direction属性用来控制主轴上项目的排布方向,默认是row即按照行内的方式在一行排列,如果想让元素按照块的方式在一列显示则可以设置flex-direction: column``row-reversecolumn-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列的间距

最后还是那句话:即使代码逻辑很简单,也值得记录下来。我的编程目标是避免重复造轮子!😊

如果觉得有用,就给我点个赞吧😁

相关推荐
m51273 分钟前
LinuxC语言
java·服务器·前端
Myli_ing1 小时前
HTML的自动定义倒计时,这个配色存一下
前端·javascript·html
dr李四维1 小时前
iOS构建版本以及Hbuilder打iOS的ipa包全流程
前端·笔记·ios·产品运营·产品经理·xcode
雯0609~2 小时前
网页F12:缓存的使用(设值、取值、删除)
前端·缓存
℘团子এ2 小时前
vue3中如何上传文件到腾讯云的桶(cosbrowser)
前端·javascript·腾讯云
学习前端的小z2 小时前
【前端】深入理解 JavaScript 逻辑运算符的优先级与短路求值机制
开发语言·前端·javascript
彭世瑜2 小时前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript
FØund4042 小时前
antd form.setFieldsValue问题总结
前端·react.js·typescript·html
Backstroke fish2 小时前
Token刷新机制
前端·javascript·vue.js·typescript·vue
小五Five2 小时前
TypeScript项目中Axios的封装
开发语言·前端·javascript