其他回答《深入解析微信小程序页面中实现的保存图片（附代码）》中，来给大家了解一下小程序页面上达到的存图。下边本文为大家介绍如何使用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其他类似文章！