CSS Flex 弹性布局使用
2023-02-18 16:39:12 时间
前端钻研不深,本文只是稍微记录一下关于Flex布局的知识,讲得不深,需要深入了解学习的可以参考其他大佬的博客
重点记录
通过display:flex
即可将div设置为flex布局
flex-direction
是关于布局排列的方向,默认为row,flex-direction: column
可以将flex布局纵向排列
flex布局可以通过align-item
和justify-content
设置元素对齐方式
默认flex布局是横向排列,align-item
是对于y轴方向的对齐方式,justify-content
是对于x轴的对齐方式
如果flex布局是纵向排列,则align-item
是对于x轴方向的对齐方式,justify-content
是对于y轴的对齐方式,与上面的相反
justify-content使用space-between即可让元素实现左右对齐的效果,使用space-around可以达到同样的效果,两者的不同为:space-around会在左右对齐后,会将间距进行平分且分给元素
flex:1 1 0% 自动占满
PS: 由于使用的是Uni-app开发,下面中的div是使用view标签
居中
以下都是横向排列的代码,关键属性为align-item
和justify-content
水平居中
<!-- 水平居中 -->
<view style="display: flex;justify-content: center;">
<view style="background-color: #007AFF;">内容</view>
<view style="background-color: orange;">内容1</view>
</view>
垂直居中
<!-- 垂直居中 -->
<view class="flex" style="align-items: center;">
<view style="background-color: #007AFF;">内容</view>
</view>
水平垂直居中
<!-- 水平垂直居中 -->
<view class="flex" style="align-items: center;justify-content: center;">
<view style="background-color: #007AFF;">内容</view>
</view>
左右对齐
<!-- 左右对齐 -->
<view style="display: flex;justify-content: space-between;">
<view style="background-color: #007AFF;">内容</view>
<view style="background-color: orange;">内容1</view>
</view>
<!-- 左右平分内容,可扩展为平分布局 -->
<view style="display: flex;">
<view style="background-color: #007AFF;flex: 1 1 0%;">内容</view>
<view style="background-color: orange;flex: 1 1 0%;">内容1</view>
</view>
上下对齐
<!-- 垂直居顶 -->
<view class="flex" style="align-items: flex-start;">
<view style="background-color: #007AFF;">内容</view>
</view>
<!-- 垂直居底 -->
<view class="flex" style="align-items: flex-end;">
<view style="background-color: #007AFF;">内容</view>
</view>
自己稍微封装一下常用的样式:
.match_parent {
flex: 1 1 0%;
}
.flex_left_right {
display: flex;
justify-content: space-between;
}
.flex {
display: flex
}
.flex-center{
display: flex;
align-items: center;
}
相关文章
- 使用Commons Logging
- 记一次 .NET 某自动化采集软件 崩溃分析
- [C# 中的序列化与反序列化](.NET 源码学习)
- .NET 向量类型的运算结果范例——用于学习Vector类所提供百多个向量方法
- 树莓派(香橙派)通过.NET IoT 操作SPI编写屏幕驱动 顺手做个四足机器人(一)
- WPF自定义控件之消息提示
- .NET跨平台框架选择之一 - Avalonia UI
- 篇(16)-Asp.Net Core入门实战-权限管理之用户创建与关联角色(ViewModel再用与模型验证二)
- 学习ASP.NET Core Blazor编程系列十——路由(下)
- 代码生成器(CodeBuilder) 2.9.4 稳定版
- 篇(15)-入门实战-权限管理之用户创建与关联角色(ViewModel再用与模型验证一)
- 篇(14)-Asp.Net Core入门实战-权限管理之角色编辑和赋权(ViewModel-DTO初探)
- 算法-2 选择排序、冒泡排序、插入排序
- 篇(13)-Asp.Net Core入门实战-将功能代码增加异步功能Async和配置简单防范CSRF攻击
- NET 6 实现滑动验证码(一)、创建工程
- 算法-1 算法复杂度
- 在WPF中使用Prism弹出自定义窗体样式的对话框
- 使用Fody时,CS-SCRIPT动态代码无法找到程序集
- C# 使用SIMD向量类型加速浮点数组求和运算(3):循环展开
- aspnetcore两种上传图片(文件)的方式