容器属性

容器支持的属性有:
display:通过设置display属性,指定元素是否为Flex布局。
flex-direction:指定主轴方向,决定了项目的排列方式。
flex-wrap:排列换行设置。
flex-flow:flex-direction和flex-wrap的简写形式。
justify-content:定义项目在主轴上的对齐方式。
align-items:定义项目在交叉轴上的对齐方式。
align-content:定义多根轴线的对齐方式,如果只有一根轴线,该属性不起作用。

1.display

display用来指定该元素是否为Flex布局,语法为:

 .mybox{ display: flex | inline-flex; }

其属性值如下:
flex:用于产生块级Flex布局。
inline-flex:用于产生行内Flex布局,行内容器符合行内元素的特性,同时在容器内又符合Flex布局规范。
设置Flex布局以后,子元素的float、clear和vertical-align属性将会失效。

2.flex-direction

flex-direction用于指定主轴的方向,即项目排列的方向,语法为:

    .mybox{ flex-direction : row | row-reverse | colum | colum-reverse; }

它有4个值

row:主轴为水平方向,起点在左端,默认值。
row-reverse:主轴为水平方向,起点在右端。
colum:主轴为垂直方向,起点在上沿。
colum-reverse:主轴为垂直方向,起点在下沿

3.flex-wrap

默认情况下,项目都排在一条线上,flex-wrap用来指定如果一条轴线排不下,该如何换行。

    .mybox{ flex-wrap : nowrap | wrap | wrap-reverse; }

它有3个值

nowrap:不换行,默认值。
wrap:换行,第一行在上方。
wrap-reverse:换行,第一行在下方。
当设置换行时,还需要设置align-item属性配合实现自动换行,并且align-item的值不能为“stretch”。

4.flex-flow

flex-flow是flex-direction和flex-wrap的简写形式,默认值为row nowrap。语法如下:

示例代码如下:
.mybox{ flex-direction : row; }
.mybox{ flex-wrap : nowrap; }
/*和上一句效果一样 */
.mybox{ flex-flow : row nowrap; }

5.justify-content

justify-content属性定义了项目在主轴上的对齐方式,语法如下:

 .mybox{ justify-content : flex-start | flex-end | center | space-between | space-around; }

justify-content与主轴方向有关,包括以下属性(默认主轴从左到右)

flex-start:左对齐,默认值。
flex-end:右对齐。
center:居中。
space-between:两端对齐,项目之间的间隔都相等。
space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。

6.align-items

align-items指定项目在交叉轴上如何对齐,语法如下:

  .mybox{ align-items : flex-start | flex-end | center | baseline | stretch; }

algin-items与交叉轴方向有关,包括以下属性(假设交叉轴从上到下

flex-start:交叉轴的起点对齐。
flex-end:交叉轴的终点对齐。
center:交叉轴的中线对齐。
baseline:项目根据它们第一行文字的基线对齐。
stretch:如果项目未设置高度或设置为auto

7.align-content

align-content用来定义项目多根轴线(出现换行后)在交叉轴上的对齐方式,如果项目只有一根轴线,该属性不起作用,语法如下:

    .mybox{ align-content : flex-start | flex-end | center | space-between | space-around | stretch; }

其属性值如下

flex-start:与交叉轴的起点对齐。
flex-end:与交叉轴的终点对齐。
center:与交叉轴的中点对齐。
space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
space-around:每根轴线两侧的间隔都相等,轴线之间的间隔比轴线与边框间隔大一倍。
stretch:轴线占满整个交叉轴,每个项目会被拉伸直至填满交叉轴,默认值。

项目属性

项目支持的属性有6个:
order:定义项目的排序顺序。
flex-grow:定义项目的放大比例。
flex-shrink:定义项目的缩小比例。
flex-basis:定义在分配多余空间之前,项目占据的主轴空间(main size)。
flex:flex-grow、flex-shrink和flex-basis的简写。
align-self:用来设置单独的伸缩项目在交叉轴上的对齐方式,可覆盖默认的algin-items属性。

1.order

order属性定义项目的排列顺序。数值越小,排列越靠前(如图3-16),默认为0,语法如下:

.myitem{ order : <integer>; }
 

2.flex-grow

flex-grow定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大,语法如下:

    .myitem{ flex-grow : <number>; }

如果所有项目的flex-grow值都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍,整体按比例填充剩余空间

3.flex-shrink

flex-shrink定义了项目的缩小比例,默认为1,如果空间不足,该项目将缩小,语法如下:

    .myitem{ flex-shrink : <number>; }

如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小,负值对该属性无效。

这里我们举个例子,如一个容器宽200px,里面有4个项目,它们的宽度都为60px,那么整体宽度就是4×60=240px,比容器多了40px,如果这4个项目的flex-shrink值分别为1、2、1、3,那么它们的宽度分别按比例减少40px × 1 / (1+2+1+4) = 5px、40px × 2 / (1+2+1+4) = 10px、40px × 1 /(1+2+1+4) = 5px、40px × 4 / (1+2+1+4) = 20px,缩小后它们的宽度分别为:55px、50px、55px、40px。

4.flex-basis

flex-basis属性用来定义伸缩项目的基准值,剩余的空间将按比例进行缩放。它的默认值为auto,即项目的本来大小,语法如下:

    .myitem{ flex-basis : <length> | auto; }

它可以设为跟width或height属性一样的固定值,如320px,这样项目将占据固定空间。

5.flex

flex属性是flex-grow、flex-shrink和flex-basis的简写,默认值为0 1 auto。后两个属性可选,语法如下:

    .myitem{ none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] }

该属性有两个快捷值:auto(1 1 auto)和none(0 0 auto)。
建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值。
示例代码如下:

 .myitem{ flex: 1 1 auto }
.myitem{ flex : auto; }
/* 同上句 */
.myitem{ flex: 0 0 auto }
.myitem{ flex : none; }
/* 同上句 */
.myitem{ flex : 1 auto; }
.myitem{ flex : 1 1; }

6.align-self

align-self用来设置单独的伸缩项目在交叉轴上的对齐方式,该属性会复写默认的对齐方式,语法如下:

 .myitem{ align-self : auto | flex-start | flex-end | center | baseline | stretch; }

该属性6个值除了auto,其余和容器align-items属性完全一致:
auto:表示继承容器align-items属性,如果没有父元素,则等同于stretch,默认值。
flex-start:交叉轴的起点对齐
flex-end:交叉轴的终点对齐。
center:交叉轴的中线对齐。
baseline:项目根据它们第一行文字的基线对齐。
stretch:如果项目未设置高度或设置为auto,项目将在交叉轴方向拉伸填充整个容器,默认值。

小程序Flex布局的更多相关文章

  1. uniapp 小程序 flex布局 v-for 4栏展示

    注:本项目的图片资源来源于后端接口,所以使用的是v-for. 关键词:uniapp 小程序 flex布局 v-for 4栏展示 自适应 <view style="display: fl ...

  2. 微信小程序~Flex布局

    有一点需要注意的是,你的小程序要求兼容到iOS8以下版本,需要开启样式自动补全.开启样式自动补全,在“设置”—“项目设置”—勾选“上传代码时样式自动补全”.

  3. 微信小程序—Flex布局

    参考教程:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html     https://xluos.github.io/demo/flexb ...

  4. 微信小程序flex布局

    一.flex布局基础 二.相对定位和绝对定位   flex的容器和元素   主轴(左-右),交叉轴(上-下)     flex容器属性详解 flex-direction 决定元素的排列方向(默认row ...

  5. css flex布局,小程序flex布局,垂直居中完美解决

    flex弹性布局,很好的解决了垂直居中的问题,上代码: wxml: <view class='container'> <view class='item item1'>item ...

  6. 微信小程序-flex布局中align-items和align-self区别

    首先看看菜鸟教程中关于align-items和align-self的定义 align-items:align-items 属性定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式.(对 ...

  7. 微信小程序 | flex布局属性

    flex-direction 主轴方向 row: 横向 row-reverse: 横向倒序 column: 纵向 column-reverse: 纵向倒序; flex-wrap 元素排列换行 nowr ...

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

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

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

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

随机推荐

  1. 反射之深入理解Constructor原理

    .katex { display: block; text-align: center; white-space: nowrap; } .katex-display > .katex > ...

  2. SpringBoot: 14.异常处理方式4(使用SimpleMappingExceptionResolver处理异常)(转)

    修改异常处理方法3中的全局异常处理Controller即可 package bjsxt.exception; import org.springframework.context.annotation ...

  3. 如何解决docker 官方镜像拉取慢的问题

    转自: http://skycity.today/?thread-307.htm 国内从 docker 官方 Registry 拉取 image 慢的解决,步骤如下: 1.注册一个阿里云账号. 2.阿 ...

  4. 【miscellaneous】软件加密方法

    原文:http://www.jiamisoft.com/blog/3471-ruanjianjiamifangfa.html 软件行业的加密是软件厂商为了保护软件开发的利润而采取的一种软件保护方式.当 ...

  5. SQL 查询建表SQL

    1.新建一个查询语句,按执行按钮 2.结果页面会显示一条sql语句,复制该语句即可建表 3.建表测试

  6. ML.NET 1

    ML.NET 示例:目录 ML.NET 示例中文版:https://github.com/feiyun0112/machinelearning-samples.zh-cn英文原版请访问:https:/ ...

  7. codevs 2853:方格游戏

    (排版没搞好,这一行用来卖萌~) 题目描述 Description 菜菜看到了一个游戏,叫做方格游戏~ 游戏规则是这样的: 在一个n*n的格子中,在每个1*1的格子里都能获得一定数量的积分奖励,记左上 ...

  8. windows上OpenSSH服务安装及启动

    一.windows安装OpenSSH 1,下载openSSH windows版 GitHub下载链接 我安装的是64位版本 OpenSSH-Win64.zip 2,解压到C:\Program File ...

  9. JDBC:数据库连接技术

    JDBC :带它再爱你一次 (一) JDBC 入门 (1) 概述 Java数据库连接,(Java Database Connectivity,简称JDBC)是Java语言中用来规范客户端程序如何来访问 ...

  10. 【转帖】龙芯3A3000处理器深度评测:和Intel、AMD差距巨大

    龙芯3A3000处理器深度评测:和Intel.AMD差距巨大 https://www.eefocus.com/mcu-dsp/424623/r0 作者非计算机科班毕业 让我汗颜. 我计算机毕业都不知道 ...