建站资讯

一键建网站服务平台-小程序布局display flex布局介

作者:admin 发布时间:2021-04-09
--------

一键建网站服务平台

------- 题目是手机微信小程序合理布局display flex合理布局详细介绍,实际上是对css3的display flex的通用性解释,其实不限于手机微信小程序合理布局,手机微信小程序里并不是写div之类,应当换为view之类的标识,自然基本原理一样,把这篇 display flex是甚么?

手机微信小程序近期火的不要不要的,免费下载开发设计专用工具检测了一下,小程序对css适用很好, 合理布局应用display flex合理布局火力点强劲,不太掌握或对flex合理布局比较疏远的童靴共享一下display flex一部分专业知识

display flex是将目标做为延展性伸缩盒显示信息。(伸缩盒全新版本号)(CSS3)

在web网页页面中务必要考虑到适配性,由于访问器不一样,访问器的适用和完成方法也不一样,致使适配起来略显麻烦

但是,大家这里是开发设计手机微信小程序的话,其实不需要考虑到别的访问器。

display flex合理布局应用方式

设置一个器皿,在其中有多个子器皿,例如,这是一个简易的事例

 div  >
 display flex器皿的特性

flex-direction

flex-wrap

flex-flow

justify-content

align-items

align-content

flex-direction特性 flex-direction特性决策主轴的方向(即新项目的排序方向)。

.box { 

 flex-direction: row | row-reverse | column | column-reverse; 

row(默认设置值):主轴为水平方向,起始点在左端。

row-reverse:主轴为水平方向,起始点在右端。

column:主轴为竖直方向,起始点在上沿。

column-reverse:主轴为竖直方向,起始点在下沿。

  flex-wrap特性 默认设置状况下,新项目都排在一条线(又称 轴线 )上。flex-wrap特性界定,假如一条轴线排不下,怎样换行。

.box{ 

 flex-wrap: nowrap | wrap | wrap-reverse; 

(1)nowrap(默认设置):不换行。 (2)wrap:换行,第一行在上方。 (3)wrap-reverse:换行,第一行在正下方。   flex-flow flex-flow特性是flex-direction特性和flex-wrap特性的简写方式,默认设置值为row nowrap。  

.box { 

 flex-flow:  flex-direction  ||  flex-wrap  

}  

justify-content特性 justify-content特性界定了新项目在主轴上的对齐方法。
.box {  

 justify-content: flex-start | flex-end | center | space-between | space-around; 

flex-start(默认设置值):左对齐

flex-end:右对齐

center: 垂直居中

space-between:两边对齐,新项目之间的间距都相同。

space-around:每一个新项目两侧的间距相同。因此,新项目之间的间距比新项目与边框的间距大一倍。

align-items特性 align-items特性界定新项目在交叉式轴上怎样对齐

.box { 

 align-items: flex-start | flex-end | center | baseline | stretch; 

flex-start:交叉式轴的起始点对齐。

flex-end:交叉式轴的终点站对齐。

center:交叉式轴的中点对齐。

baseline: 新项目的第一写作字的基准线对齐。

stretch(默认设置值):假如新项目未设定高宽比或设为auto,将占满全部器皿的高宽比。

  align-content特性 align-content特性界定了多根轴线的对齐方法。假如新项目仅有一根轴线,该特性不起功效。
.box {  

 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

flex

align-self

order特性 order特性界定新项目的排序次序。标值越小,排序越靠前,默认设置为0。

.item { 

 order:  integer  

 flex-grow特性 flex-grow特性界定新项目的变大占比,默认设置为0,即假如存在剩下室内空间,也不变大。

.item { 

 flex-grow:  number  /* default 0 */ 

假如全部新项目的flex-grow特性都为1,则它们将等分剩下室内空间(假如有的话)。假如一个新项目的flex-grow特性为2,别的新项目都为1,则前者占有的剩下室内空间将比别的项多一倍。
flex-shrink特性 flex-shrink特性界定了新项目的变小占比,默认设置为1,即假如室内空间不够,该新项目将变小。

.item { 

 flex-shrink:  number  /* default 1 */ 


假如全部新项目的flex-shrink特性都为1,当室内空间不够时,都将等占比变小。假如一个新项目的flex-shrink特性为0,别的新项目都为1,则室内空间不够时,前者不变小。
负值对该特性失效。
flex-basis特性 flex-basis特性界定了在分派过剩室内空间之前,新项目占有的主轴室内空间(main size)。访问器依据这个特性,测算主轴是不是有过剩室内空间。它的默认设置值为auto,即新项目的原本尺寸。

.item { 

 flex-basis:  length  | auto; /* default auto */ 



它能够设为跟width或height特性一样的值(例如350px),则新项目将占有固定不动室内空间。
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)。
提议优先选择应用这个特性,而并不是独立写三个分离出来的特性,由于访问器会推算有关值。
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特性彻底一致。


↓ 查询全文
本文连接:手机微信小程序合理布局display

手机微信小程序合理布局display flex合理布局详细介绍由懒人建网站搜集梳理,您能够随意散播,请积极带上本文连接

懒人建网站就是完全免费共享,觉得有效就多来适用一下,沒有能帮到您,懒人也只能表明遗憾,期待有一天能帮到您。

---------

一键建网站服务平台

------------

收缩