第三次学flex 布局，学吧 学无止境 ，没脾气。
设置主轴 这个我洗了很多遍了：
<template>
<view>
<view class="container">
<!--这是一个flex 弹性盒子-->
<view class="red text">
红
</view>
<view class="green text">
绿
</view>
<view class="blue text">
蓝
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
}
}
</script>
<style>
.container{
display: flex;/*定义flex容器*/
/*
*row设置主轴为 横向（l->r）
*row-reverse设置主轴为横向 但是是 (r->l)
*columns: 设置主轴为 竖向（上->下）
*column-reverse: 设置主轴为横向 但是是 (下->上)
*/
flex-direction: row;
}
.red{
background-color: #FF0000;
}
.green{
background-color: #4CD964;
}
.blue{
background-color: #007AFF;
}
.text{
width: 150upx;
height: 150upx;
font-size: 20px;
}
</style>
Code 设置主轴
注释也说的非常清楚了 详细代码看即可。
属性1： flex-wrap ：是否换行
<template>
<view>
<view class="container">
<!--这是一个flex 弹性盒子-->
<view class="red text">
红
</view>
<view class="green text">
绿
</view>
<view class="blue text">
蓝
</view>
<view class="yellow text">
黄
</view>
<view class="violet text">
紫
</view>
<view class="black text">
黑
</view>
<view class="pink text">
粉
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
}
}
</script>
<style>
.container{
display: flex;/*定义flex容器*/
flex-direction: row;
/*flex-wrap:是否换行
* nowrap： 不换行 一直挤
* wrap ： 换行 会根据实际大小算 超出换行
* wrap-reverse: 换行 但是反着换行
*/
flex-wrap: wrap-reverse;
}
.red{
background-color: #FF0000;
}
.green{
background-color: #4CD964;
}
.blue{
background-color: #007AFF;
}
.yellow{
background-color: #ffff00;
}
.violet{
background-color: #aa00ff;
}
.black{
background-color: #000000;
}
.pink{
background-color: #ff55ff;
}
.text{
width: 150upx;
height: 150upx;
font-size: 20px;
color: #FFFFFF;
}
</style>
Code flex-wrap是否换行
属性2： justify-content 设置元素在主轴上的对齐方式
<template>
<view>
<view class="container">
<!--这是一个flex 弹性盒子-->
<view class="red text">
红
</view>
<view class="green text">
绿
</view>
<view class="blue text">
蓝
</view>
<view class="yellow text">
黄
</view>
<!-- <view class="violet text">
紫
</view>
<view class="black text">
黑
</view>
<view class="pink text">
粉
</view> -->
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
}
}
</script>
<style>
.container{
display: flex;/*定义flex容器*/
flex-direction: row;
/**
* justify-content 设置元素在主轴上的对齐方式
* flex-start：左对齐（默认）
* flex-end: 右对齐
* center: 居中对齐
* space-between: 先两端占满 在中间评分
* space-around: 元素两边平均等分剩余的空白间隙，最左、最右块的间隙是 其他间隙的1：2
*/
justify-content: space-around;
}
.red{
background-color: #FF0000;
}
.green{
background-color: #4CD964;
}
.blue{
background-color: #007AFF;
}
.yellow{
background-color: #ffff00;
}
.violet{
background-color: #aa00ff;
}
.black{
background-color: #000000;
}
.pink{
background-color: #ff55ff;
}
.text{
width: 150upx;
height: 150upx;
font-size: 20px;
color: #FFFFFF;
}
</style>
View Code justify-content
属性3： align-items 设置交叉轴的对齐位置(交叉轴就是侧轴)
吃亏：justify-items 和 align-items 是不一样的 。，，， justify-items 在flex 布局中是没效果的，然后 其他布局有，而 flex 布局用的是align-items 我要讲的也是：align-items
<template>
<view>
<view class="container">
<!--这是一个flex 弹性盒子-->
<!-- 下面将会设置行内样式 测试 stretch 可以注释掉行内样式的高度即可-->
<view class="red text" style="height: 100upx">
红
</view>
<view class="green text" style="height: 200upx">
绿
</view>
<view class="blue text" style="height: 300upx">
蓝
</view>
<view class="yellow text" style="height: 400upx">
黄
</view>
<!-- <view class="violet text">
紫
</view>
<view class="black text">
黑
</view>
<view class="pink text">
粉
</view> -->
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
}
}
</script>
<style>
.container{
width: 750upx;
height: 750upx;
background-color: #000000;
display: flex;/*定义flex容器*/
flex-direction: row; /*当前主轴是左到右*/
/**
* align-items : 设置元素在交叉轴上的对齐方式
* stretch: 默认的，如果元素没高度 那么就跟随父元素的高度了 [拉伸]
* flex-start: 跟着侧轴顺走
* flex-end: 跟着侧轴逆走
* centent: 居中
*/
align-items:center;
}
.red{
background-color: #FF0000;
}
.green{
background-color: #4CD964;
}
.blue{
background-color: #007AFF;
}
.yellow{
background-color: #ffff00;
}
.violet{
background-color: #aa00ff;
}
.black{
background-color: #000000;
}
.pink{
background-color: #ff55ff;
}
.text{
width: 150upx;
font-size: 20px;
color: #FFFFFF;
}
</style>
Code 设置交叉轴的对齐方式
属性4:align-content 将 元素整体 在交叉轴上的对齐操作（如果交叉轴有空间的话）
吃亏：多行才能有效果 即 你要设置换行 warp 才可以。
<template>
<view>
<view class="container">
<!--这是一个flex 弹性盒子-->
<!-- 下面将会设置行内样式 测试 stretch 可以注释掉行内样式的宽度即可-->
<view class="red text" style="width:100upx">
红
</view>
<view class="green text" style="width: 200upx">
绿
</view>
<view class="blue text" style="width: 300upx">
蓝
</view>
<view class="yellow text" style="width: 400upx">
黄
</view>
<!-- <view class="violet text">
紫
</view>
<view class="black text">
黑
</view>
<view class="pink text">
粉
</view> -->
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
}
}
</script>
<style>
.container{
width: 750upx;
height: 250upx;
background-color: #000000;
display: flex;/*定义flex容器*/
flex-direction: column; /*当前主轴是上到下*/
/**
* align-content : 设置元素在主轴上的对齐方式
* flex-start:和主轴顺着对齐
* flex-end:和主轴相反
* center: 居中
* stretch:拉伸到和父元素那么宽（父元素）一样 ，元素没设置宽度的时候有效果
* space-around : 顶端两端对齐（留空隙） 元素之间空白等比切分 【实验记得设置长宽】
* space-between : 轴线两边的空白等比分 【实验记得设置长宽】
*
*
*/
flex-wrap: wrap; /*千万记得啊*/
align-content: space-around;
}
.red{
background-color: #FF0000;
}
.green{
background-color: #4CD964;
}
.blue{
background-color: #007AFF;
}
.yellow{
background-color: #ffff00;
}
.violet{
background-color: #aa00ff;
}
.black{
background-color: #000000;
}
.pink{
background-color: #ff55ff;
}
.text{
height: 100upx;
font-size: 20px;
color: #FFFFFF;
}
</style>
Code 设置元素在主轴上的对齐方式
属性5： order 设置元素的顺序 0开始 由小到大
<template>
<view>
<view class="container">
<view class="red text" >
红
</view>
<view class="green text" >
绿
</view>
<view class="blue text" >
蓝
</view>
<view class="yellow text" >
黄
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
}
}
</script>
<style>
.container{
width: 750upx;
height: 750upx;
background-color: #000000;
display: flex;/*定义flex容器*/
flex-direction: row; /*当前主轴是左到右*/
}
.red{
background-color: #FF0000;
order: 1; /*具体自己看效果 第二个*/
}
.green{
background-color: #4CD964;
order: 3;/*具体自己看效果 最后一个*/
}
.blue{
background-color: #007AFF;
order: 0;/*具体自己看效果 第一个*/
}
.yellow{
background-color: #ffff00;
order: 2;/*具体自己看效果 第三个*/
}
.text{
font-size: 25px;
width: 200upx;
height: 10%;
}
</style>
View Code order
：
属性6：flex-grow 设置元素的放大比例 0 不放大 以上递增
<template>
<view>
<view class="container">
<view class="red text" >
红
</view>
<view class="green text" >
绿
</view>
<view class="blue text" >
蓝
</view>
<view class="yellow text" >
黄
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
}
}
</script>
<style>
.container{
width: 750upx;
height: 750upx;
background-color: #000000;
display: flex;/*定义flex容器*/
flex-direction: row; /*当前主轴是左到右*/
}
.red{
background-color: #FF0000;
flex-grow: 0; /*具体自己看效果 0 就是不放大*/
}
.green{
background-color: #4CD964;
flex-grow: 1; /*具体自己看效果 放大比例1*/
}
.blue{
background-color: #007AFF;
flex-grow: 1; /*具体自己看效果 放大比例1*/
}
.yellow{
background-color: #ffff00;
flex-grow: 3; /*具体自己看效果 放大比例3*/
}
.text{
font-size: 25px;
width: 200upx;
height: 10%;
}
</style>
Code flex-grow
属性7 ： flex-shrink属性设置子元素放小比例
<template>
<view>
<view class="container">
<view class="red text" >
红
</view>
<view class="green text" >
绿
</view>
<view class="blue text" >
蓝
</view>
<view class="yellow text" >
黄
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
}
}
</script>
<style>
.container{
width: 550upx;
height: 750upx;
background-color: #000000;
display: flex;/*定义flex容器*/
flex-direction: row; /*当前主轴是左到右*/
}
/*
*flex-shrink属性定义了子元素的缩小比例，默认为1，当父元素空间不足时，子元素将等比例缩小，如果其中一个子 元素flex-shrink为0其他为1，那么为0的不缩小其他等比例缩小。
*/
.red{
background-color: #FF0000;
flex-shrink: 1; /*具体自己看效果 1 就是不缩小*/
}
.green{
background-color: #4CD964;
flex-shrink: 2; /*具体自己看效果 2 当父元素不能容纳的时候才缩小*/
}
.blue{
background-color: #007AFF;
flex-shrink: 3; /*具体自己看效果 3 当父元素不能容纳的时候才缩小*/
}
.yellow{
background-color: #ffff00;
flex-shrink: 6; /*具体自己看效果 4 当父元素不能容纳的时候才缩小*/
}
.text{
font-size: 25px;
width: 750upx;
height: 10%;
}
</style>
Code flex-shrink
属性8： *flex-basis表示子元素被放入flex容器之前的大小，即你想要的子元素大小而不是其真实大小，子元素最终的大小取决于flex容器的宽度。
<template>
<view>
<view class="container">
<view class="red text" >
红
</view>
<view class="green text" >
绿
</view>
<view class="blue text" >
蓝
</view>
<view class="yellow text" >
黄
</view>
<view class="pink text" >
粉
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
}
}
</script>
<style>
.container{
width: 750upx;
height: 750upx;
background-color: #000000;
display: flex;/*定义flex容器*/
flex-direction: row; /*当前主轴是左到右*/
}
/*
*flex-basis表示子元素被放入flex容器之前的大小，即你想要的子元素大小而不是其真实大小，子元素最终的大小取决于flex容器的宽度。
*/
/*
如果没设置的话 那么就是 319.99(宽) * 159.98(长)
*/
.red{
background-color: #FF0000;
flex-basis: 10upx; /* 25(宽) * 159.98(长)*/
}
.green{
background-color: #4CD964;
}
.blue{
background-color: #007AFF;
}
.yellow{
background-color: #ffff00;
}
.pink{
background-color: #ff00ff;
}
.text{
font-size: 25px;
width: 750upx;
height: 10%;
}
</style>
Code flex-basis表示子元素被放入flex容器之前的大小
我也不知道怎么算的 反正就是这样。
属性9：
本文来自博客园，作者：咸瑜，转载请注明原文链接：javascript:void(0)p/15292169.html
