正文 

当前位置： 首页 > java > java框架

微信小程序css篇----flex模型

码蚁      2022-02-14     342

关键词：

一、Flex布局是什么？

Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为Flex布局。

.box{display: flex;}

行内元素也可以使用Flex布局。

.box{display: inline-flex; }

Webkit内核的浏览器，必须加上-webkit前缀。

.box{display: -webkit-flex; /* Safari */display: flex; }

注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

二、基本概念

采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。

技术分享图片

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

三、容器的属性

以下6个属性设置在容器上。

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

3.1 flex-direction属性

flex-direction属性决定主轴的方向（即项目的排列方向）。

.box {flex-direction: row | row-reverse | column | column-reverse;}

技术分享图片

它可能有4个值。

  • row（默认值）：主轴为水平方向，起点在左端。
  • row-reverse：主轴为水平方向，起点在右端。
  • column：主轴为垂直方向，起点在上沿。
  • column-reverse：主轴为垂直方向，起点在下沿。

3.2 flex-wrap属性

默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

技术分享图片

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

它可能取三个值。

（1）nowrap（默认）：不换行。

技术分享图片

（2）wrap：换行，第一行在上方。

技术分享图片

（3）wrap-reverse：换行，第一行在下方。

技术分享图片

3.3 flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

.box {flex-flow: <flex-direction> || <flex-wrap>;} 

3.4 justify-content属性

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

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

技术分享图片

它可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。

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

3.5 align-items属性

align-items属性定义项目在交叉轴上如何对齐。

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

技术分享图片

它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。

  • flex-start：交叉轴的起点对齐。
  • flex-end：交叉轴的终点对齐。
  • center：交叉轴的中点对齐。
  • baseline: 项目的第一行文字的基线对齐。
  • stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

3.6 align-content属性

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

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

技术分享图片

该属性可能取6个值。

  • flex-start：与交叉轴的起点对齐。
  • flex-end：与交叉轴的终点对齐。
  • center：与交叉轴的中点对齐。
  • space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
  • space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
  • stretch（默认值）：轴线占满整个交叉轴。

四、项目的属性

以下6个属性设置在项目上。

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self

4.1 order属性

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

.item {order: <integer>;}

技术分享图片

4.2 flex-grow属性

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大

.item {flex-grow: <number>; /* default 0 */}

技术分享图片

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

4.3 flex-shrink属性

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

.item {flex-shrink: <number>; /* default 1 *}

技术分享图片

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

负值对该属性无效。

4.4 flex-basis属性

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

.item  {flex-basis: <length> | auto; /* default auto */ } 

它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

4.5 flex属性

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

.item {flex: none | [ <‘flex-grow‘> <‘flex-shrink‘>? || <‘flex-basis‘> }

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

4.6 align-self属性

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch

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

技术分享图片

该属性可能取6个值，除了auto，其他都与align-items属性完全一致。

转载地址：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

微信小程序css篇----布局(layout)

一：布局有以下几种：display，float，clear，visibility，overflow，overflow-x，overflow-y。1.display：设置对象是否显示。2.float：指出对象是否及如何浮动。3.clear：指出了不允许有浮动对象的边。4.visibility：是否隐藏，与display隐藏不同，vi... 查看详情

微信小程序css篇----字体(font)

一.字体：font。属性在一个声明中设置所有字体属性。可设置的属性是（按顺序）："font-stylefont-variantfont-weightfont-size/line-heightfont-family".font-size和font-family的值是必需的。如果缺少了其他值，默认值将被插入，如果有默认值的话.1.... 查看详情

微信小程序css篇----所有属性(按字母排列：c，d，e开头)

f开头的属性主要就是盒子布局和字体的，先来看图，然后在一项项来看。1.fallback：是@counter-style里的属性值。小程序里不知道怎么写，一写@counter-style就报未定义的属性。不过在css中Firefox支持。点击打开链接。2.fill：这是SVG里... 查看详情

微信小程序flex布局

参考技术AFlex布局：意为“弹性布局”，为盒模型提供巨大的灵活性使用说明：1.任何容器都可以使用flex布局  display:flex;2.行内元素可以使用flex布局  display:inline-flex;外层flex容器的属性：1.flex-direction属性  fl... 查看详情

微信小程序常用样式汇总

1.设置全局字体样式app.wxss：textfont-family:MicroSoftyahei;2.设置弹性盒子模型：复制代码.container/弹性模型/display:flex;/垂直方向列方向排布/flex-direction:column;zhaoweb.cn/居中/align-items:center;/要从整体解决排布的问题是最好的方案/复制代码3... 查看详情

微信小程序常用样式汇总

1.设置全局字体样式app.wxss：textfont-family:MicroSoftyahei;2.设置弹性盒子模型：复制代码.container/弹性模型/display:flex;/垂直方向列方向排布/flex-direction:column;zhaoweb.cn/居中/align-items:center;/要从整体解决排布的问题是最好的方案/复制代码3... 查看详情

django2.0+小程序技术打造微信小程序助手完整版

第1章课程导学第2章小程序开发入门第3章深入Django视图层第4章Django框架的会话管理第5章深入Django模型层之使用篇第6章深入Django模型层之优化篇第7章运维提升专题之Django后台篇第8章运维提升专题之部署篇第9章项目优化第10章课... 查看详情

微信小程序，小程序论坛，weixin，view内容怎么样居右显示

参考技术A在上级view中的css中设置display:flex;flex-direction:row;justify-content:flex-end 参考技术B你是在找微信小程序论坛吗？能否说具体一点。第九程序开发者论坛有你提到的东西，应该可以帮助你。望采纳，谢谢！ 查看详情

微信小程序css画三角形内有文字

<viewclass="productStatus"><span><em>已上架</em></span></view>　　.productStatus{position:absolute;right:0;top:0;height:1.81rem;width:1.81rem;display:flex;align-items:ce 查看详情

表单组件怎么竖排显示微信小程序

...布局需求。参考技术A你可以使用flex布局来实现竖排显示微信小程序表单组件。你可以先设置外层的flex布局，然后再设置每一个表单组件的flex-direction为'column'，这样就可以实现竖排显示。 查看详情

微信小程序，在屏幕下面用position：flex做一个导航栏，css样式是top：89%；iphone5正常，iphon6多出空白

iphone5下，导航正常显示，iphone7plus下导航下下面就会多出空白各位好，我就想知道通过什么方式能清除一下，或者能重新布局一下都可以参考技术A用小程序内置的导航栏不行么？如果想自制导航栏，应该用固定高度，如果用百... 查看详情

flex布局教程：语法篇

...）是CSS的一个重点应用。布局的传统解决方案，基于盒状模型，依赖 display属性+ position属性+ fl 查看详情

微信小程序——如何制作好看的表格(代码片段)

...”在日常统计中无处不在，所以今天来做一做。但是微信小程序不支持table标签，我准备用“上一篇——Flex布局”学的flex来实现一下。文章目录一、从“html的table”到“微信小程序的table”二、统一格式的表格三、非统... 查看详情

微信小程序之view的flex布局(2)

参考技术A上一章即微信小程序之view的flex布局(1)里，我们学习了flex容器的属性，总结一下它里面包括(1)flex-direction设置容器内子元素即flex-item的排列方向。(2)flex-warp设置容器内子元素是否换行。(3)justify-content设置子元素在横轴即... 查看详情

微信小程序完结篇之生命周期(代码片段)

介绍:今天我们学习一下生命周期,这个是小程序基础的最后一个章节,小程序生命周期分为应用生命周期和页面生命周期应用生命周期属性类型默认值必填说明onLaunchfunction否监听⼩程序初始化。onShowfunction否监听⼩程序启动或切前... 查看详情

flex布局教程：语法篇(代码片段)

...）是CSS的一个重点应用。布局的传统解决方案，基于盒状模型，依赖 display 属性+ position属性+ floa 查看详情

微信小程序view的布局

参考技术A横向布局or竖向布局=>设置属性flex-direction设置元素在横向上的布局方向，需要设置justify-content属性设置元素在纵向上的布局方向，需要设置align-items属性用于控制子View是否换行=>设置flex-wrap属性 查看详情

flex布局教程：语法篇

...）是CSS的一个重点应用。布局的传统解决方案，基于盒状模型，依赖 display属性+ position属性+ float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不 查看详情