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列的间距

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

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

相关推荐
杨进军5 分钟前
React 创建根节点 createRoot
前端·react.js·前端框架
ModyQyW20 分钟前
用 AI 驱动 wot-design-uni 开发小程序
前端·uni-app
说码解字26 分钟前
Kotlin lazy 委托的底层实现原理
前端
爱分享的程序员1 小时前
前端面试专栏-算法篇:18. 查找算法(二分查找、哈希查找)
前端·javascript·node.js
翻滚吧键盘1 小时前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js
vim怎么退出1 小时前
万字长文带你了解微前端架构
前端·微服务·前端框架
你这个年龄怎么睡得着的1 小时前
为什么 JavaScript 中 'str' 不是对象,却能调用方法?
前端·javascript·面试
Java水解1 小时前
前端常用单位em/px/rem/vh/vm到底有什么区别?
前端
CAD老兵1 小时前
Vite 如何借助 esbuild 实现极速 Dev Server 体验,并支持无 source map 的源码调试
前端
南屿im1 小时前
JavaScript 手写实现防抖与节流:优化高频事件处理的利器
前端·javascript