微信小程序开发从入门到实战（中篇，共上中下3篇）.pptxVIP

第五章页面设计与样式设计

目录5.1页面布局5.2WXSS样式基础5.3响应式设计

5.1页面布局Part01

页面布局是指在小程序中组织和排列UI元素的过程，涉及容器、网格、定位等多个方面。01?页面布局的基本原则包括盒子模型、块级元素与行内元素以及浮动与定位。025.1页面布局

盒子模型由内容、内边距、边框和外边距组成，对padding、border和margin可以进一步细化为上、下、左、右4个部分5.1.1盒子模型图5-1-1盒子模型结构图5-1-2wxss中对padding、border、margin设置

Flex布局是flexibleBox的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何容器都可以指定为flex布局，是目前最流行的布局模式，它能轻松应对各种复杂的界面排列需求Flex布局具备任意方向的伸缩，可以向左，向右，向下，向上伸缩02015.1.2Flex布局

flex属性flex-direction：设置主轴的方向justify-content：设置主轴上的子元素排列方式flex-wrap：设置子元素是否换行align-content：设置侧轴上的子元素的排列方式(多行)align-items：设置侧轴上的子元素排列方式(单行)flex-flow：复合属性,相当于同时设置了flex-direction和flex-w