uni-app（3.flex布局）
1.Flex布局
1.概念、优势、模型
2.容器的属性和布局
3.容器内元素的属性
1.Flex布局的概念、优势、模型
1.概念：
1.flexible box:弹性盒装布局
2.容器控制内部元素的布局定位
3.CSS3引入的新布局模型
4.伸缩元素，自由填充，自适应
2.优势：
1.可在不同方向排列元素
2.控制元素排列的方向
3.控制元素的对齐方式
4.控制元素之间等距
5.控制单个元素放大与缩放比例、占比、对齐方式
3.常用术语：
1.flex container : flex 容器
2.flex item : flex 元素
3.flex direction：flex布局方向
4.模型：
2.flex容器的属性和布局
1.属性
1.flex-direction：设置元素的排列方向
row 从左向右
row-reverse 从右到左
column 从上到下
column-reverse 从下到上
在pages下新建页面flex-direction，并在pages.json中将flex-direction页面设为首页
在flex-direction目录下新建css文件：flex-direction.css：
.container{ /* 定义flex容器 */ display: flex; flex-direction: row; } .txt{ background-color: #007AFF; text-align: center; font-size: 50px; width: 150upx; height: 150upx; }
flex-direction.vue：
<template> <view class="container"> <view class="txt"> 1 </view> <view class="txt"> 2 </view> <view class="txt"> 3 </view> </view> </template> <script> export default { data() { return { } }, methods: { } } </script> <style> @import url("flex-direction.css"); </style>
效果图
2.flex-wrap：使容器内的元素换行
在pages目录下新建flex-wrap页面，在pages.json中将flex-wrap设为首页
在flex-wrap目录下新建flex-wrap.css
flex-wrap.vue：
<template> <view class="container"> <view class="txt"> 1 </view> <view class="txt"> 2 </view> <view class="txt"> 3 </view> <view class="txt"> 4 </view> <view class="txt"> 5 </view> <view class="txt"> 6 </view> </view> </template> <script> export default { data() { return { } }, methods: { } } </script> <style> @import url("flex-wrap.css"); </style>
flex-wrap.css：
.container{ /* 定义flex容器 */ display: flex; /* flex-wrap: nowrap;不换行，默认 */ /* flex-wrap: wrap;自动换行 */ } .txt{ background-color: green; text-align: center; font-size: 50px; width: 150upx; height: 150upx; }
3.justify-content：设置元素在主轴上排列，处理空白部分。
新建页面justify-content，在pages.json中配置，设置为首页。
在justify-content目录下新建justify-content.css
justify-content.vue：
<template> <view class="container"> <view class="txt"> 1 </view> <view class="txt"> 2 </view> <view class="txt"> 3 </view> </view> </template> <script> export default { data() { return { } }, methods: { } } </script> <style> @import url("justify-content.css"); </style>
justify-content.css：
.container{ /* 定义flex容器 */ display: flex; flex-direction: row; /* 设置元素在主轴上的对齐方式 */ /* 如果主轴是垂直方向的(flex-direction选了column,需要给设置高度,才能对立面的元素起效果) */ /* flex-start (默认,左对齐 或者向上对齐) */ /* flex-end 右对齐(注意,跟flex-direction的row-reverse的不同,顺序没变) */ /* center居中对齐; */ /* space-between 两端对齐,元素之间均分空白间隙 */ /* space-around 元素两边均分空白间隙,最左和最右的间隙跟元素之间的间隙是1:2的关系 */ justify-content: space-around; } .txt{ background-color: #007AFF; text-align: center; font-size: 50px; width: 150upx; height: 150upx; }
4.align-items：设置元素在交叉轴上的对齐方式
新建页面align-items，在pages.json中配置，设置为首页。
在align-items目录下新建align-items.css
flex-start
flex-end
center
baseline 所有文字不论文字尺寸，底部都在同一条线
stretch（默认）元素如果不设置高度，盒子设置了高度，元素的高度会拉伸到跟盒子等高。
align-items.vue：
<template> <view class="container"> <view class="txt aaa"> 1 </view> <view class="txt bbb"> 2 </view> <view class="txt ccc"> 3 </view> </view> </template> <script> export default { data() { return { } }, methods: { } } </script> <style> @import url("align-items.css"); </style>
align-items.css：
.container{ /* 定义flex容器 */ display: flex; /* 定义主轴方向 */ flex-direction: row; justify-content: space-around; height: 800upx; /* 设置容器中元素在交叉轴上的对齐方式 stretch:(默认)当元素的高度没有设置,则元素的高度会拉伸至容器高度一致 flex-start：在交叉轴上向起点位置（向上或向左）对齐 flex-end:在交叉轴的结束位置（向下或向右）对齐*/ align-items: center; } .txt{ background-color: green; text-align: center; font-size: 50px; width: 150upx; /* height: 150upx; */ } .aaa{ height: 150upx; } .bbb{ height: 300upx; } .ccc{ height: 450upx; }
5.align-content多轴线的对齐方式。
6.flex元素属性
新建页面flex-items，在pages.json中配置为首页。
在flex-items目录下新建flex-items.css
flex-tiems.vue：
<template> <view class="container"> <view class="txt aaa"> 1 </view> <view class="txt bbb"> 2 </view> <view class="txt ccc"> 3 </view> </view> </template> <script> export default { data() { return { } }, methods: { } } </script> <style> @import url("flex-items.css"); </style>
flex-items.css：
.container{ /* 定义flex容器 */ display: flex; flex-direction: row; background-color: #F0AD4E; height: 600upx; } .txt{ background-color: #007AFF; text-align: center; font-size: 20px; width: 150upx; height: 150upx; } /* order用于设置flex容器内部的每个元素的排列顺序,默认是0排序顺序,从小到大 */ /* flex-grow:用于设置元素的放大比例,默认是0 如果为0则不放大。 正整数代表了元素 剩余空间的分配比例，进行放大。前提是有空隙。 flex-shrink：用于设置元素的缩小比例。前提是元素总宽度，大于总宽度。 flex-basis：不需要前提，将元素宽度改变为flex-basis宽度*/ /* align-self:重写元素在容器内的交叉轴上的对齐方式，auto表示默认，继承容器的属性 */ .aaa{ background-color: #4CD964; order: 3; /* flex-grow: 1; */ flex-basis: 300upx; align-self: center; } .bbb{ background-color: #808080; order: 2; /* flex-grow: 1; */ } .ccc{ background-color: #007AFF; order: 1; /* flex-grow: 2; */ }
