微信小程序页面中实现的保存图片(附代码)

其他回答《深入解析微信小程序页面中实现的保存图片（附代码）》中，来给大家了解一下小程序页面上达到的存图。下边本文为大家介绍如何使用CSS3制作一个简易界面的合理布局，感兴趣的小伙伴们可以参考一下。

兼容模式

2009 年，W3C明确提出了一种新的计划方案----Flex合理布局，能够简单、详细、响应式网站地完成各种各样网页布局。

• 标1仅支持老旧flexbox标准，不兼容外包装。

• 标2仅支持2012词法

• 标3不兼容flex-wrap，flex-flow或align-content特性

• 标4一部分适用主要是因为存在许多不正确（参照已经知道难题）

定义

Flex是Flexible Box的简称，意指"弹力合理布局"，用于为盒状实体模型给予最大的一个协调能力。

留意，设成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之上 2 个属性简称

• justify-content水平对齐方法

• align-items垂直对齐方法

• align-content多做平衡遍布

flex-direction特性

flex-direction特性确定主轴轴承方向（即工程项目的排序方位）。flex-direction：row | row-reverse | column | column-reverse;

• row（初始值）：主轴轴承为垂直方向，起始点在左边。

• row-reverse：主轴轴承为垂直方向，起始点在右端。

• column：主轴轴承为竖直方向，起始点在上方。

• column-reverse：主轴轴承为竖直方向，起始点再下沿。

flex-wrap

默认设置前提下，项目都排到一条线（又被称为"中心线"）上。flex-wrap属性定义，假如一条中心线排下不来，如何换行。

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

• nowrap（默认设置）：不换行。

• wrap：自动换行，第一行在上方。

• wrap-reverse：自动换行，第一行在下方。

flex-flow

flex-flow属性flex-direction特性和flex-wrap属性缩写方式，初始值为row nowrap。

justify-content 特性（垂直方向两端对齐）

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

• flex-start（初始值）：左对齐

• flex-end：右对齐

• center：垂直居中

• space-between：自动换行，新项目间的间距都相同。

• space-around：各个项目两边的间距相同。因此，新项目间的间距比项目与外框的间距大一倍。

align-items特性（竖直方向两端对齐）

align-items属性定义项目交叉轴上如何对齐。align-items: flex-start | flex-end | center | baseline | stretch;

• flex-start：交叉轴的开端两端对齐。

• flex-end：交叉轴的终点站两端对齐。

• center：交叉轴的中心点两端对齐。

• baseline : 工程项目的第一行汉字的基准线两端对齐。

• stretch（初始值）：假如新项目未进行相对高度或设成 auto，将布满全部容器相对高度。

align-content特性

align-content属性定义了多条中心线的对齐方式。假如新项目仅有一根中心线，该特性失灵。align-content: flex-start | flex-end | center | space-between | space-around | stretch;

• flex-start：与交叉轴的开端两端对齐。

• flex-end：与交叉轴的终点站两端对齐。

• center：与交叉轴的中心点两端对齐。

• space-between：与交叉轴自动换行，中心线间的间距平均分布。

• space-around：每条中心线两边的间距都相同。因此，中心线间的间距比中心线- 与外框的间距大一倍。

• stretch（初始值）：中心线布满全部交叉轴。

新项目的特性

其实就是flex container，它全部子元素的特性

• order，排列

• flex-grow，拉申

• flex-shrink，挤压成型

• flex-basis， 固定不动规格

• flex，grow shrink basis的简称

• align-self，重新写过了父级的align-items对齐方式

order 特性

order属性定义工程项目的排序。标值越小，排序越提上去，默认 0。

<!-- order为-1 排到置前 -->
<div style="order:-1">3</div>

flex-grow特性

flex-grow属性定义工程项目的放大比例，默认 0，即如果出现可用空间，都不变大。便是是不是拉申

<div style="flex-grow:1">1</div>
<div>1</div>
<div style="flex-grow:5">2</div>
<div style="flex-grow:1">1</div>

假如所有项目的flex-grow特性均为1，则他们将均分可用空间（有的话）。如果一个工程项目的flex-grow特性为 2，很多项目均为 1，则前面一种占有的可用空间将比其它项多一倍。

flex-shrink特性

flex-shrink属性定义了项目地缩小比例，默认 1，即假如内存不足，此项目将变小。排不下去的情况下，它会扭曲变形，死也要排下去。负数对于该特性失效

<div style="flex-shrink:0">0</div>

flex-basis特性

flex-basis属性定义在分派不必要室内空间以前，新项目占有的主轴轴承室内空间（main size）。电脑浏览器按照这个特性，测算主轴轴承是不是多余室内空间。它初始值为auto，即工程项目的原本尺寸。

<div style="flex-basis:100px">100px</div>

flex 特性

flex属性flex-grow,flex-shrink和flex-basis的缩写，初始值为 0 1 auto。后2个特性可选择。 该特性有两种便捷值：auto (1 1 auto)和none (0 0 auto)。

提议优先使用这一特性，而非独立写三个分离出来的特性，是因为电脑浏览器会测算有关值。

.test {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 100px;
}

/* 相当于 */
.test {
    flex: 1 1 100px;
}

`

align-self特性

align-self特性容许单独新项目有和很多项目不一样的对齐方式，可遮盖align-items特性。初始值为auto，表明传承父元素的align-items特性，要是没有父元素，则相当于stretch。

align-self: auto | flex-start | flex-end | center | baseline | stretch;

<div style="align-self:flex-end;">5</div>

强烈推荐学习培训：CSS3视频教学

以上就是关于教你如何应用CSS3制作一个简易界面的合理布局（编码详细说明）的具体内容，大量欢迎关注AdminJS其他类似文章！