微信小程序学习--基础--盒子模型Flexbox

主要包括 Flex 容器属性和 Flex 项目属性

Flex 容器属性

flex-direction:项目元素排列的方向

row：项目从左向右排列

row-reverse：项目从右向左排列

column：纵向对齐排列，从上到下

column-reverse：反转纵向对齐排列，从下到上

flex-wrap:项目元素排列的方式

nowrap：项目元素不会溢出，也不会自动换行

wrap：项目元素超出宽度时，自动换行

wrap-reverse：反转自动换行，相当于wrap是往下换行，wrap-reverse是向上换行

justify-content：定义了项目在主轴上的对齐方式

flex-start：项目从主轴的开始（左侧）开始对齐

flex-end：项目从主轴的结束（右侧）开始对齐，顺序仍然是从左到右abc

center：项目从主轴的中心开始对齐

space-between：各项目之间保持相同的距离排布

space-around：同上，并且会在两边留有距离

align-items：项目交叉轴的方式

这个比较难解释，具体看这个align-items演示

flex-end

center

baseline

stretch

align-content：多行项目排列方式

flex-start：第二行紧靠第一行进行排布

flex-end：同上，不过从下面位置开始堆叠

flex-center：同上，从中间开始堆叠

space-between：各行在两侧进行分布

space-around：同上，并且上下留有距离

stretch：各行平均分配所有的剩余空间

Flex 项目属性

order：定义项目的排列顺序，值越小，排列越靠前

flex-grow：项目的放大比例，默认为0

flex-shrink：项目的缩小比例

flex-basis：项目在主轴上的空间，可以设置为 **px

align-self：项目自己的对齐方式

微信小程序学习--基础--盒子模型Flexbox相关推荐

微信小程序_基础组件学习02
微信小程序_基础组件学习02 swiper组件 swiper是滑块容器,也就是手机端的轮播图. swiper组件有两部分组成swiper和swiper-item. swiper-item需要放在swi ...
微信小程序学习（1）-基础开发
学习微信小程序微信小程序学习(1) 微信小程序学习(2) 文章目录学习微信小程序注册和初始化小程序配置 tabbar导航栏模板插样与WXML 循环渲染条件渲染模板微信小程序脚本WXS ...
知乎爆赞！4504页《微信小程序零基础入门开发文档》+《小程序实战笔记》，你学废了吗？
前言微信小程序作为近几年"微服务"的杰出代表,应用十分广泛.小程序是一种新的开放能力,开发者可以快速地开发一个小程序.小程序可以在微信内被便捷地获取和传播,同时具有出色的使用体验 ...
微信小程序学习笔记（1）
微信小程序学习笔记 1.小程序代码结构 2.逻辑层和视图层 3. 小程序的宿主环境(通信模型.运行机制.组件.API) 4. 数据绑定和事件绑定 1.小程序代码结构当开发者新建一个工程时,项目文件包 ...
微信小程序学习笔记一 + 小程序介绍前置知识
微信小程序学习笔记一 1. 什么是小程序? 2017年度百度百科十大热词之一微信小程序, 简称小程序, 英文名 Mini Program, 是一种不需要下载安装即可使用的应用 ( 张小龙对其的定义是 ...
微信小程序学习笔记（一）
干货来袭基础前言微信⼩程序,简称⼩程序,英⽂名 Mini Program ,是⼀种不需要下载安装即可使⽤的应⽤,它实现了应⽤"触⼿可及"的梦想,⽤⼾扫⼀扫或搜⼀下即可打开 ...
微信小程序开发基础教程
文章目录 1.什么叫做微信小程序 2.微信小程序开发功能特点 3.微信小程序开发流程 3.1 微信公众平台注册 3.2 微信开发者工具下载 3.3 微信开发者工具界面上的基本功能介绍 3.3.1 开发 ...
微信小程序零基础入门（上）
目录第一章.前言 1.1 小程序与网页开发的区别 1.2 首次开发小程序的准备工作第二章.小程序基础结构了解 2.1 项目构成 2.1.1 项目的基本组成结构 2.1.2 小程序页面的组成部分 2 ...
微信小程序学习（四）：微信小程序连接云数据库
微信小程序学习(四):微信小程序连接云数据库我今天就只是初步的连接了数据库,我就说一下我的基础代码,和我整了好久才整完的问题这里有个初始化,非常重要!非常重要!非常重要!!! 是放在app.js里 ...

微信小程序学习--基础--盒子模型Flexbox

微信小程序学习--基础--盒子模型Flexbox相关推荐

最新文章

热门文章