欢迎光临
我的个人博客网站

CSS Flex 弹性布局使用


原文地址:CSS Flex 弹性布局使用 | Stars-One的杂货小窝

前端钻研不深,本文只是稍微记录一下关于Flex布局的知识,讲得不深,需要深入了解学习的可以参考其他大佬的博客

重点记录

通过display:flex即可将div设置为flex布局

flex-direction是关于布局排列的方向,默认为row,flex-direction: column可以将flex布局纵向排列

flex布局可以通过align-itemjustify-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-itemjustify-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; } 
赞(0) 打赏
未经允许不得转载:张拓的天空 » CSS Flex 弹性布局使用
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏