flex布局基础
flex的容器和元素
默认从左到右的轴叫主轴(main axis),从上到下的轴叫侧轴(cross axis),也叫交叉轴。黄色背景部分就是容器。
flex的容器属性详解
flex-direction
决定元素排列方向flex-wrap
决定元素如何换行(排列不下时)flex-flow
是flex-direction
和flex-wrap
的简写justify-content
决定元素在主轴上的对齐方式align-items
决定元素在交叉轴的对齐方式
<view class="container" >
<view class="item">1</view>
<view class="item">2</view>
<view class="item">3</view>
<view class="item">4</view>
</view>
.container {
height : 100%;
width:100%;
background-color: khaki;
display: flex;
flex-direction: row;
}
.item {
width:100rpx;
height:100rpx;
background-color: seagreen;
border: 1px solid #fff;
}
flex-direction
/* flex-direction有两种方向,默认为row,还有一种为column */
flex-direction: column;
当设置为column
时,实际上我们是把容器从上到下当作主轴,从左到右当做交叉轴。
flex-wrap
当在主页添加多个view时,如果不设置flex-wrap
且默认方向为row时,各个item就会排在一行内,而放不下时就会导致变形。
flex-wrap : wrap;
* flex-wrap : nowrap;
不换行
* flex-wrap : wrap;
换行
* flex-wrap : wrap-reverse;
反转
flex-flow
flex-flow: row wrap;
justify-content
.container {
height : 100%;
width:100%;
background-color: khaki;
display: flex;
flex-flow: row wrap;
justify-content: center;
}
display: flex;
flex-direction: column; /* 主轴改为从上往下了 */
justify-content: center; /* 主轴上的对齐方式 */
当从左到右的轴为主轴时:
flex-start
主轴左对齐
flex-end
主轴右对齐
center
居中对齐
space-around
每个item左右两边间隔相等
space-between
最左和最右不留间隔
align-items
元素在交叉轴上的对齐方式。
justify-content: flex-start; /* 默认的主轴上对齐方式 */
align-items: flex-start;
当从上到下的轴为交叉轴时:
flex-start
上对齐
flex-end
下对齐
center
居中对齐
stretch
当元素没有设置固定高度时,自动让元素的占满整个容器的高度
如果不给每个item设置固定高度,效果如下:
baseline
以文字的基线进行对齐
给第三个view单独设置一个样式
<view class="item i3">3</view>
.i3 {
display: flex;
align-items: flex-end;
}
flex元素属性详解
flex元素的属性只能用在每个 flex item里面,是无法用在container里面的。
* flex-grow
当有多余空间时,元素的放大比例
* flex-shrink
当空间不足时,元素的缩小比例
* flex-basis
元素在主轴上占据的空间
* flex
是grow
shrink
basis
的简写
* order
定义元素的排列顺序
* align-self
定义元素自身的对齐方式
.item {
width:100rpx;
height:100rpx;
background-color: seagreen;
border: 1px solid #fff;
flex-grow: 1;
}
flex-grow
默认值为0
.item {
width:100rpx;
height:100rpx;
background-color: seagreen;
border: 1px solid #fff;
flex-grow: 1;
}
.i3 {
display: flex;
align-items: flex-end;
flex-grow: 2;
}
item1、2、4占据多余空间的一份,item3占据多余空间的两份
flex-shrink
默认值为1,当空间不足时,各item等比缩小
将第三个元素单独设置样式为flex-shrink: 0
,则该元素不缩小:
.i3 {
display: flex;
align-items: flex-end;
/* flex-grow: 2; */
flex-shrink: 0;
}
.i3 {
display: flex;
align-items: flex-end;
/* flex-grow: 2; */
flex-shrink: 5;
}
flex-basis
.i3 {
display: flex;
align-items: flex-end;
flex-basis: 150px;
}
order
.item {
width:100rpx;
height:100rpx;
background-color: seagreen;
border: 1px solid #fff;
order: 3;
}
.i3 {
display: flex;
order: 1;
}
<view class="container" >
<view class="item" style="order:4">1</view>
<view class="item" style="order:3">2</view>
<view class="item i3" style="order:2">3</view>
<view class="item" style="order:1">4</view>
</view>
align-self
.container {
min-height : 100%;
width:100%;
background-color: khaki;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
}
.i3 {
display: flex;
align-self: flex-end; /* item3 设置为和其他不同的对齐方式 */
}
.i3 {
display: flex;
align-self: center;
}
相对定位和绝对定位
理解相对定位和绝对定位
相对定位的元素是相对自身进行定位,参照物就是自己
绝对定位的元素是相对离它最近的一个已定位的父级元素进行定位
相对定位、绝对定位的编码
<view class="item3" >3</view>
.item3 {
width:100rpx;
height:100rpx;
background-color: seagreen;
border: 1px solid #fff;
position: relative;
left: 50rpx; /* 相对原来的自己进行偏移 */
top: 50rpx;
}
.container {
min-height : 100%;
width: 100%;
background-color: khaki;
position: absolute;
left: 100rpx;
top: 100rpx;
}
.item3 {
width:100rpx;
height:100rpx;
background-color: seagreen;
border: 1px solid #fff;
position: absolute; /* 离它最近的已定位的父级元素是container */
left: 50rpx;
top:50rpx;
}
.container {
min-height : 100%;
width:100%;
background-color: khaki;
margin-left: 100rpx;
margin-top:100rpx;
}
.item3 {
width:100rpx;
height:100rpx;
background-color: seagreen;
border: 1px solid #fff;
position: absolute; /* 离它最近的已定位的父级元素是整个page,因为container没有定位 */
left: 50rpx;
top:50rpx;
}