伸缩容器支持的属性有:

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

用于定义伸缩项目的放大比例,默认值0,即如果存在剩余空间,也不放大,如果所有伸缩项目的flex-grow设置为1,那么每个伸缩项目将设置为大小相等的剩余空间,如果你将其中一个flex-frow伸缩项设置为2,那么这个伸缩项目所占剩余空间是其他伸缩项目所占胜于空间的两倍
 

flex-shrink

该属性用来定义伸缩项目的收缩能力

flex-basis

该属性用来设置伸缩项目的基准值,剩余空间按比率进行伸缩
 

flex

该属性是flex-grow ,flex-shrink,flex-basis属性的缩写
flex: none | flex-grow flex-shrink flex-basis
 

align-self

用于设置单独的伸缩项目在交叉轴上的对齐方式,会覆盖默认的对齐方式
align-self: auto | flex-start | flex-end | center | baseline | stretch

温馨小程序前端布局Flex的更多相关文章

  1. 微信小程序_(组件)flex布局

    小程序建议使用flex布局进行排版 flex是一个盒装弹性布局 flex是一个容器,所有子元素都是他的成员 定义布局:display:flex flex容器的属性: 一.flex-direction: ...

  2. 微信小程序CSS之Flex布局

    转载:https://blog.csdn.net/u012927188/article/details/83040156 相信刚开始学习开发小程序的初学者一定对界面的布局很困扰,不知道怎么布局,怎么摆 ...

  3. 微信小程序开发入门学习(2):小程序的布局

    概述 小程序的布局采用了和Css3中相同的 flex(弹性布局)方式,使用方法也类似(只是属性名不同而已). 水平排列 默认是从左向右水平依次放置组件,从上到下依次放置组件. 任何可视组件都需要使用样 ...

  4. 微信小程序,前端大梦想(六)

    微信小程序,前端大梦想(六) 微信小程序之联合百度API实现定位 定位功能对于我们都不陌生,在移动端的应用中更是不可或缺的功能,小程序中也提供了对应的API帮助我们完成定位的实现,但是目前小程序的定位 ...

  5. 微信小程序的布局css样式

    微信小程序的布局css样式width: fit-content;font-size:20px;      /*设置文字字号*/color:red;           /*设置文字颜色*/font-w ...

  6. 微信小程序前端页面书写

    微信小程序前端页面书写 WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件.事件系统,可以构建出页面的结构. 一.数据绑定 1. 普通写法 <view ...

  7. 微信小程序前端样式WXSS书写

    微信小程序前端样式WXSS书写 一. WXSS的简单介绍 WXSS(WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式. 与 CSS 相比,WXSS 扩展的特性有: ...

  8. 关于微信小程序前端Canvas组件教程

    关于微信小程序前端Canvas组件教程 微信小程序Canvas接口函数 ​ 上述为微信小程序Canvas的内部接口,通过熟练使用Canvas,即可画出较为美观的前端页面.下面是使用微信小程序画图的一些 ...

  9. 微信小程序前端与myeclipse的数据交换过程(SSH)

    这是我个人探究微信小程序前端与后端之间的数据交换的过程,再结合个人所学的SSH框架, 编程工具用myEclipse2014工具.当然,前提是后台的项目要部署到tomcat服务器上才行, 然后总结了从后 ...

随机推荐

  1. 过滤特殊字符(包括过滤emoji表情)

    /** * 过滤特殊字符 * @param $text * @return mixed */ public static function filterSpecialChars($text) { // ...

  2. P2114 [NOI2014]起床困难综合症(二进制)

    P2114 [NOI2014]起床困难综合症 我们开始设俩数,一个二进制表示全是1,另一个全是0(就是2147483647 和 0 辣) 蓝后跑一遍门 于是最后有4种情况 1->0,1-> ...

  3. IIS W3C日志记录字段和HTTP状态代码的说明

    像新网的部分服务器ftp目录有这个文件,但是就是提示没权限查看也没有权限下载,还得必须给他们打电话才能要到. 做为网站拥有者,我们应该关注IIS日志,从里面我们不仅仅可以看到网站的访问记录和搜索引擎的 ...

  4. Angular routing生成路由和路由的跳转

    Angular routing生成路由和路由的跳转 什么是路由 路由的目的是可以让根组件按照不同的需求动态加载不同的组件. 根据不同地址,加载不同组件,实现单页面应用. Angular 命令创建一个配 ...

  5. Atlas读写分离[高可用]

    Atlas下载地址: https://github.com/Qihoo360/Atlas/releases Atlas是出于360的, 比mysql-proxy更稳定, 部署起来更方便. 环境: pr ...

  6. 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 ...

  7. topcoder srm 700 div1 -3

    1.有$n$个人,编号1到$n$.将其平均分到$m$个房间中,每个房间$K$个人.现在知道每个房间编号最小的人的编号.对于给出的人$x$.问其可能在的房间有多少种? 思路:先假设其在某个房间,然后判断 ...

  8. Python3基础 e记法示例

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...

  9. Restful framework【第六篇】认证组件

    基本用法 -认证功能 1 写一个类,继承BaseAuthentication 2 def authenticate(self,request) ,记住传request对象 -如果验证通过,返回None ...

  10. FAQ Flyway

    https://flywaydb.org/documentation/faq What is the best strategy for dealing with hot fixes? You hav ...