文章目录

Flex布局的概念
Flex的属性
- flex-direction：设置元素的排列方向
- flex-wrap：使容器内的元素换行
- justify-content：设置元素在主轴上的对齐方式
- align-items：设置元素在交叉轴上的对齐方式
- align-content：设置轴线的对齐方式（轴线当做元素）
Flex元素的属性
- order：控制元素顺序
- flex-grow：控制元素放大比例
- flex-shrink：控制元素缩小比例
- flex-basis：设置元素固定或自动空间的占比
- align-self：重写align-items父属性

Flex布局的概念

特点：

flexible box：弹性盒状布局
容器控制内部元素的布局定位
CSS3引入的新布局模型
伸缩元素，自由填充，自适应

优势：

可在不同方向排列元素
控制元素排序的方向
控制元素的对齐方式
控制元素之间等距
控制单个元素放大与缩放比例、占比、对齐方式

flex布局的常用术语：

flex container:flex容器
flex item:flex项目（元素）
flex direction：布局方向

主轴可以是水平的，也可以是垂直的，需要我们去设置

Flex的属性

flex-direction：设置元素的排列方向

参数：

row 从左到右排序
主轴是横向的

row-reverse 从右向左排序
主轴是横向的的

column 从上到下排序
主轴是垂直的

column-reverse 从下到上排序
主轴是垂直的

row


<template>
<view class="container"><!--    可以定义各种各样的组件来配合flex布局 --><view class="green text"> A</view><view class="blue text"> B</view><view class="red text"> C</view><view class="orange text"> D</view><view class="black text"> E</view></view>
</template><script>//VM：协调者调度器export default {//Model所有的数据data() {return {title: 'Hello uni-app',student:{age:18},skill:["Java","HTML","CSS","JavaScript","Python"],url:"../Hello/Hello"}},onLoad() {},methods: {change(e){var txtTitle = e.detail.value;  //获取值//debugger;  //断点this.title = txtTitle;}}}
</script><style>.container{/* 定义flex容器 */display: flex;/*设置容器内部容器的排列方向*/    flex-direction: row; }.green{background-color: green;}.blue{background-color: blue;}.red{background-color: red;}.black{background-color: black;}.orange{background-color: orange;}.text{font-size: 20upx;width: 150upx;height: 150upx;}
</style>

结果：

flex-direction改为row-reverse

改为column

改为column-reverse

样式与代码的分离;
同级目录下mycss.css

.container{/* 定义flex容器 */display: flex;/*设置容器内部容器的排列方向*/ flex-direction: column-reverse; }.green{background-color: green;}.blue{background-color: blue;}.red{background-color: red;}.black{background-color: black;}.orange{background-color: orange;}.text{font-size: 20upx;width: 150upx;height: 150upx;}

在vue文件的style中写入

<style>@import url("mycss.css");
</style>

flex-wrap：使容器内的元素换行

nowrap 不换行
wrap 换行
wrap-reverse 逆向换行排序


<template>
<view class="container"><!--    可以定义各种各样的组件来配合flex布局 --><view class="green text"> A</view><view class="blue text"> B</view><view class="red text"> C</view><view class="orange text"> D</view><view class="black text"> E</view></view>
</template><script>//VM：协调者调度器export default {//Model所有的数据data() {return {}},onLoad() {},methods: {}}
</script><style>@import url("mycss.css");
</style>

样式：

.container{/* 定义flex容器 */display: flex;/*设置容器内部容器的排列方向*/ flex-direction: row;flex-wrap:wrap;}.green{background-color: green;}.blue{background-color: blue;}.red{background-color: red;}.black{background-color: black;}.orange{background-color: orange;}.text{font-size: 20upx;width: 200upx;height: 200upx;}

结果：

flex-wrap 改成nowrap

发现他们自动压缩了
flex-wrap改为wrap-reverse

justify-content：设置元素在主轴上的对齐方式

想象成沿对角线折叠

根据主轴方向的不同：
flex-start 左对齐或者向上对齐
flex-end 右对齐或者向下对齐
center 居中对齐

留有间隙
space-between 两端对齐，空白均匀地填充到flex成员项之间。
space-around 元素两边平均等分剩余空白间隙部分，最左或最右和元素之间距离是1：2

justify-content 为center的时候

.container{/* 定义flex容器 */display: flex;/*设置容器内部容器的排列方向*/ flex-direction: row;justify-content: center;}.green{background-color: green;}.blue{background-color: blue;}.red{background-color: red;}.black{background-color: black;}.orange{background-color: orange;}.text{font-size: 100upx;width: 120upx;height: 120upx;}


<template>
<view class="container"><!--    可以定义各种各样的组件来配合flex布局 --><view class="green text"> A</view><view class="blue text"> B</view><view class="red text"> C</view><view class="orange text"> D</view><view class="black text"> E</view></view>
</template><script>//VM：协调者调度器export default {//Model所有的数据data() {return {}},onLoad() {},methods: {}}
</script><style>@import url("mycss.css");
</style>

justify-content 为flex-start的时候

justify-content 为flex-end的时候

justify-content 为space-around时候：

justify-content 为space-between时候：

切换主轴会出现水平变垂直垂直的变水平的情况
把flex-direction改为column

之所以挨着是因为垂直方向没有设置相应的高度
更改：

.container{/* 定义flex容器 */display: flex;/*设置容器内部容器的排列方向*/ flex-direction: column;justify-content: space-between;height: 800upx;width: 100%;background-color: #39B54A;}

结果

align-items：设置元素在交叉轴上的对齐方式

flex-start 上对齐，所有的成员项排列在容器顶部。

flex-end 下对齐，所有的成员项排列在容器底部。

center 中间对齐，所有成员项都垂直地居中显示。

baseline 保证元素中的文字在同一条基准线（保证每个文字都在同一条线上）

stretch（默认）拉伸高度至flex容器的大小。
注意这里没有设置内部的项目的高度只有宽度
但是设置了最外围的容器的高度

aligin-items的值为stretch的时候

.container{/* 定义flex容器 */display: flex;flex-direction: row;align-items: stretch;height: 800upx;background-color: #AAAAAA;}.green{background-color: green;}.blue{background-color: blue;}.red{background-color: red;}.black{background-color: black;}.orange{background-color: orange;}.text{font-size: 100upx;width: 120upx;}

aligin-items的值为flex-start的时候:

aligin-items的值为flex-end的时候

aligin-items的值为center的时候

align-items的值为baseline

如果高度不同的话会出现这种情况 baselline

align-content：设置轴线的对齐方式（轴线当做元素）

当轴线超过1条(多行)的时候，flex容器可以把多条轴线视为元素对待，可以进行对齐

flex-start 向左对齐

flex-end 向右对齐

center 居中

stretch 当宽度width没有设置的时候，轴线可以被拉伸

space-between 两端对齐，元素之间的空白等比切分

space-around 轴线两边的空白等比切分

/* align-content: center; */注释了这部分

.container{/* 定义flex容器 */display: flex;flex-direction: column;flex-wrap: wrap;height: 600upx;background-color: #AAAAAA;/* align-content: center; */}.green{background-color: green;}.blue{background-color: blue;}.red{background-color: red;}.black{background-color: black;}.orange{background-color: orange;}.text{font-size: 100upx;width: 180upx;height: 180upx;}

align-content: center

align-content为flex-start的时候

align-content为flex-end的时候

align-content为stretch的时候(默认)

将高度注释掉

并没有被拉伸
原因是我们的排列元素是竖直的。
我们把宽度注释掉（保留高度）

align-content为space-between的时候

align-content为space-around的时候

Flex元素的属性

order：控制元素顺序

用于设置flex容器内部的每个元素的排列顺序，默认是e排序规则，有小到大

.container{/* 定义flex容器 */display: flex;flex-direction: row;}.green{background-color: green;order: 1;}.blue{background-color: blue;order: 2;}.red{background-color: red;order: 3;}.black{background-color: black;order: 4;}.orange{background-color: orange;order: 5;}.text{font-size: 100upx;width: 120upx; height: 120upx;}

order的值越小越排在前面

flex-grow：控制元素放大比例

默认值为0 不会放大

.container{/* 定义flex容器 */display: flex;flex-direction: row;}.green{background-color: green;flex-grow: 1;}.blue{background-color: blue;}.red{background-color: red;}.black{background-color: black;}.orange{background-color: orange;}.text{font-size: 100upx;width: 120upx; height: 120upx;}

结果为：

.container{/* 定义flex容器 */display: flex;flex-direction: row;}.green{background-color: green;flex-grow: 1;}.blue{background-color: blue;flex-grow: 1;}.red{background-color: red;}.black{background-color: black;}.orange{background-color: orange;}.text{font-size: 100upx;width: 120upx; height: 120upx;}

结果为：

做了等比的切分

.container{/* 定义flex容器 */display: flex;flex-direction: row;}.green{background-color: green;flex-grow: 1;}.blue{background-color: blue;flex-grow: 3;}.red{background-color: red;flex-grow: 1;}.black{background-color: black;}.orange{background-color: orange;}.text{font-size: 100upx;width: 120upx; height: 120upx;}

结果为：

flex-shrink：控制元素缩小比例

前提是空间不够

flex-shrink：用于定义属性的缩放比例，默认为1设置为e的时候，不进行缩放

.container{/* 定义flex容器 */display: flex;flex-direction: row;}.green{background-color: green;}.blue{background-color: blue;}.red{background-color: red;}.black{background-color: black;}.orange{background-color: orange;}.text{font-size: 100upx;width: 200upx; height: 200upx;}

默认情况下：

.container{/* 定义flex容器 */display: flex;flex-direction: row;}.green{background-color: green;flex-shrink: 4;}.blue{background-color: blue;flex-shrink: 4;}.red{background-color: red;flex-shrink: 4;}.black{background-color: black;}.orange{background-color: orange;}.text{font-size: 100upx;width: 200upx; height: 200upx;}

如果值为0 则不进行缩放

flex-basis：设置元素固定或自动空间的占比

.container{/* 定义flex容器 */display: flex;flex-direction: row;}.green{background-color: green;flex-basis: 200upx;}.blue{background-color: blue;}.red{background-color: red;}.black{background-color: black;}.orange{background-color: orange;}.text{font-size: 100upx;width: 120upx; height: 120upx;}

这里进行放大

如果 flex-basis改为100 则会进行缩放

align-self：重写align-items父属性

重写容器中元素在交叉轴上的对齐方式

auto：默认，表示继承父级元素的align-items属性

stretch：当元素的高度没有设置，则元素的高度会拉伸至容器高度一致

flex-starl：在交叉轴上向起点位置（向上/向左）对齐

flex-end：在交叉轴上向结束位置（向下/向右）对齐

center：居中对齐

baseline：保证元素中的文字在同一条基准线（保证每个文字都在同一条线上）

.container{/* 定义flex容器 */display: flex;flex-direction:row ;align-items: baseline;height: 800upx;background-color: #AAAAAA}.green{background-color: green;align-self: center;}.blue{background-color: blue;}.red{background-color: red;}.black{background-color: black;}.orange{background-color: orange;}.text{font-size: 100upx;width: 120upx; height: 120upx;}

结果：

.container{/* 定义flex容器 */display: flex;flex-direction:row ;align-items: baseline;height: 800upx;background-color: #AAAAAA}.green{background-color: green;align-self: center;}.blue{background-color: blue;align-self: flex-end;}.red{background-color: red;align-self: center;}.black{background-color: black;}.orange{background-color: orange;}.text{font-size: 100upx;width: 120upx; height: 120upx;}

结果：

【uni-app】Flex布局相关推荐

Flex布局示例简述-携程App主页布局
Flex布局示例简述-携程App主页布局使用要点无论是块元素,还是内联元素,都可以被指定为flex布局: flex items是任何直接子元素,既可以是块元素,也可以是内联元素: flex ite ...
使用Flex布局实现携程APP首页布局
目录一.整体分析二.具体样式实现 1.全局样式设置 2.搜索栏 3.游玩导航栏 4.主要功能导航栏 5.便利功能导航栏 6.广告部分 7.页面底部三.完成效果四.总结一.整体分析这次作业主 ...
H5 携程app官网首页用flex布局+css3详细教程
效果图详细教程 1.搭建 H5携程移动端页面 (一) 2.flex布局 H5携程移动端头部搜索框 (二) 3.flex布局 H5携程移动端头部个人中心和图标 (三) 4.flex布局 H5携程移动端 ...
uni app 零基础小白到项目实战-1
uni-app是一个使用vue.js开发跨平台应用的前端框架.开发者通过编写vue.js代码,uni-app将其编译到Ios,android,微信小程序等多个平台,保证其正确并达到优秀体验.Uni-a ...
css之flex布局
flex布局是css3中的重要布局方式,称为"弹性布局",每次想到它主要是遇到元素垂直居中.元素宽高自适应的问题,这些问题在flex中都能过简单设置就解决,它更像是原生APP中的布 ...
image 微信小程序flex_微信小程序进阶－flex布局
对于一个后端程序员来说最麻烦的就是布局了,今天就介绍下小程序的布局,介绍一种高效的小程序布局方案.笔者之前也做过native app的布局,对比下来,小程序的布局没有native那么灵活,毕竟goog ...
通过调试微信小程序示例代码解析flex布局参数功能(一)
通过调试微信小程序示例代码解析flex布局参数功能官方示例小程序源代码下载地址:https://github.com/wechat-miniprogram/miniprogram-demo 通过调试 ...
flex 移动开发 html5,[ html5 ] 移动端适配方案 flex布局+rem布局
viewport视口 viewport是严格的等于浏览器的窗口.viewport与跟viewport有关的meta标签的关系,详细建议读一读这篇文章:移动前端开发之viewport的深刻理解,view ...
Flex布局-实现网上商城-个人中心页面
Flex布局-网上商城-个人中心页面运用flex知识,可以快速实现弹性功能的页面.无论是排列方式还是横竖居中,flex都能轻松搞定,并具备弹性功能,可随屏幕变化而伸缩.下面这个网上商城-个人中心页面 ...
微信小程序入门与实战之rpx响应式单位与flex布局
新建页面的技巧与规则小程序包含一个描述整体程序的 app 和多个描述各自页面的 page. 一个小程序主体部分由三个文件组成,必须放在项目的根目录,如下: app.json必须有一个pages数组: ...

【uni-app】Flex布局

文章目录

Flex布局的概念

Flex的属性

flex-direction：设置元素的排列方向

flex-wrap：使容器内的元素换行

justify-content：设置元素在主轴上的对齐方式

align-items：设置元素在交叉轴上的对齐方式

align-content：设置轴线的对齐方式（轴线当做元素）

Flex元素的属性

order：控制元素顺序

flex-grow：控制元素放大比例

flex-shrink：控制元素缩小比例

flex-basis：设置元素固定或自动空间的占比

align-self：重写align-items父属性

【uni-app】Flex布局相关推荐

最新文章

热门文章

【uni-app】Flex布局

文章目录

Flex布局的概念

Flex的属性

flex-direction：设置元素的排列方向

flex-wrap： 使容器内的元素换行

justify-content：设置元素在主轴上的对齐方式

align-items：设置元素在交叉轴上的对齐方式

align-content：设置轴线的对齐方式（轴线当做元素）

Flex元素的属性

order：控制元素顺序

flex-grow：控制元素放大比例

flex-shrink：控制元素缩小比例

flex-basis：设置元素固定或自动空间的占比

align-self：重写align-items父属性

【uni-app】Flex布局相关推荐

最新文章

热门文章

flex-wrap：使容器内的元素换行