温馨小程序前端布局Flex
伸缩容器支持的属性有:
1,display
2,flex-direction
3,flex-wrap
4,flex-flow
5,justify-content
6,align-items
7,align-content
8,order
9,flex-grow
10,flex-basis
11,flex
12,align-self
主要介绍这几个属性
display:flex | display:inline-flex
该属性用于指定主轴方向,语法为
flex-direction: row | row-reverse | column | column-reverse
该属性用来指定伸缩容器的主轴线方向空间不足的情况下,是否换行以及该如何换行
flex-wrap: nowrap | wrap | wrap-reverse
该属性是flex-direction和flex-wrap属性的缩写版本,它同时指定了伸缩容器的主轴和侧轴,其默认属性为row nowrap
flex-flow: flex-direction | flex-wrap
该属性用来定义伸缩项目沿主轴线的对齐方式
justify-content: flex-start | flex-end | center | space-between | space-around
该属性用来定义伸缩项目在伸缩容器的交叉轴上的对齐方式
align-items: flex-start | flex-end | center | baseline | stretch;
用来调整伸缩项目出现换行后在交叉轴上的对齐方式,类似于伸缩项目在主轴上使用justify-content
align-content: flex-start | flex-end | center | space-between | space-around | stretch
flex-grow
flex-shrink
flex-basis
flex
align-self
温馨小程序前端布局Flex的更多相关文章
- 微信小程序_(组件)flex布局
小程序建议使用flex布局进行排版 flex是一个盒装弹性布局 flex是一个容器,所有子元素都是他的成员 定义布局:display:flex flex容器的属性: 一.flex-direction: ...
- 微信小程序CSS之Flex布局
转载:https://blog.csdn.net/u012927188/article/details/83040156 相信刚开始学习开发小程序的初学者一定对界面的布局很困扰,不知道怎么布局,怎么摆 ...
- 微信小程序开发入门学习(2):小程序的布局
概述 小程序的布局采用了和Css3中相同的 flex(弹性布局)方式,使用方法也类似(只是属性名不同而已). 水平排列 默认是从左向右水平依次放置组件,从上到下依次放置组件. 任何可视组件都需要使用样 ...
- 微信小程序,前端大梦想(六)
微信小程序,前端大梦想(六) 微信小程序之联合百度API实现定位 定位功能对于我们都不陌生,在移动端的应用中更是不可或缺的功能,小程序中也提供了对应的API帮助我们完成定位的实现,但是目前小程序的定位 ...
- 微信小程序的布局css样式
微信小程序的布局css样式width: fit-content;font-size:20px; /*设置文字字号*/color:red; /*设置文字颜色*/font-w ...
- 微信小程序前端页面书写
微信小程序前端页面书写 WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件.事件系统,可以构建出页面的结构. 一.数据绑定 1. 普通写法 <view ...
- 微信小程序前端样式WXSS书写
微信小程序前端样式WXSS书写 一. WXSS的简单介绍 WXSS(WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式. 与 CSS 相比,WXSS 扩展的特性有: ...
- 关于微信小程序前端Canvas组件教程
关于微信小程序前端Canvas组件教程 微信小程序Canvas接口函数 上述为微信小程序Canvas的内部接口,通过熟练使用Canvas,即可画出较为美观的前端页面.下面是使用微信小程序画图的一些 ...
- 微信小程序前端与myeclipse的数据交换过程(SSH)
这是我个人探究微信小程序前端与后端之间的数据交换的过程,再结合个人所学的SSH框架, 编程工具用myEclipse2014工具.当然,前提是后台的项目要部署到tomcat服务器上才行, 然后总结了从后 ...
随机推荐
- 过滤特殊字符(包括过滤emoji表情)
/** * 过滤特殊字符 * @param $text * @return mixed */ public static function filterSpecialChars($text) { // ...
- P2114 [NOI2014]起床困难综合症(二进制)
P2114 [NOI2014]起床困难综合症 我们开始设俩数,一个二进制表示全是1,另一个全是0(就是2147483647 和 0 辣) 蓝后跑一遍门 于是最后有4种情况 1->0,1-> ...
- IIS W3C日志记录字段和HTTP状态代码的说明
像新网的部分服务器ftp目录有这个文件,但是就是提示没权限查看也没有权限下载,还得必须给他们打电话才能要到. 做为网站拥有者,我们应该关注IIS日志,从里面我们不仅仅可以看到网站的访问记录和搜索引擎的 ...
- Angular routing生成路由和路由的跳转
Angular routing生成路由和路由的跳转 什么是路由 路由的目的是可以让根组件按照不同的需求动态加载不同的组件. 根据不同地址,加载不同组件,实现单页面应用. Angular 命令创建一个配 ...
- Atlas读写分离[高可用]
Atlas下载地址: https://github.com/Qihoo360/Atlas/releases Atlas是出于360的, 比mysql-proxy更稳定, 部署起来更方便. 环境: pr ...
- libopencv_shape.so.3.0: cannot open shared object file: No such file or directory 解决笔记
进入目录:/etc/ld.so.conf.d 创建:opencv.conf 添加:/opt/opencv-3.0.0/build/lib 执行:ldconfig DETAIL: (1)ldd dlsd ...
- topcoder srm 700 div1 -3
1.有$n$个人,编号1到$n$.将其平均分到$m$个房间中,每个房间$K$个人.现在知道每个房间编号最小的人的编号.对于给出的人$x$.问其可能在的房间有多少种? 思路:先假设其在某个房间,然后判断 ...
- Python3基础 e记法示例
Python : 3.7.0 OS : Ubuntu 18.04.1 LTS IDE : PyCharm 2018.2.4 Conda ...
- Restful framework【第六篇】认证组件
基本用法 -认证功能 1 写一个类,继承BaseAuthentication 2 def authenticate(self,request) ,记住传request对象 -如果验证通过,返回None ...
- FAQ Flyway
https://flywaydb.org/documentation/faq What is the best strategy for dealing with hot fixes? You hav ...