CSS Flex 弹性布局使用

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

前端钻研不深,本文只是稍微记录一下关于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; }