Flex布局实战

Flex布局简介

Flex布局是一种用于网页布局的现代CSS布局模型。它使用flex容器和flex项来实现灵活的、响应式的布局。Flex容器是父元素，内部包含一系列的flex项。Flex项可以根据指定的规则自动调整尺寸和位置，以适应不同的屏幕大小和设备类型。

Flex布局初概念

Flex布局，全称Flexible Box布局，是一种在CSS3中引入的新的布局方式。

采用Flex布局的元素被称为Flex项目（Flex items），这些元素在Flex容器（Flex container）内部自动成为其成员。Flex容器可以包含一个或多个Flex项目。

Flex布局的主要特点在于其具有两根轴：主轴和侧轴。主轴的起始位置与边框的交叉点被称为main start，结束位置被称为main end；侧轴的起始位置叫做cross start，结束位置叫做cross end。

Flex项目在主轴上默认是线性排列的，而在交叉轴上的排列则由flex-direction属性定义，该属性有四个可能的值：row（默认值，项目从左向右排列）、row-reverse（项目从右向左排列）、column（项目从上向下排列）和column-reverse（项目从下向上排列）。

此外，Flex容器可以设置其子元素的弹性空间（flex space），并通过flex-grow和flex-shrink属性来控制其子元素如何分配这些空间。

Flex布局的使用可以简化传统布局中一些复杂的布局问题，使得页面在不同屏幕和设备上呈现出最佳效果。

Flex布局设置

1、Flex布局属性及其作用和属性值以及描述

属性名	作用	属性值	描述
display	用于将元素设置为弹性盒子或行内弹性盒子	flex	将元素设置为弹性盒子
flex-direction	定义主轴的方向，决定子元素如何在主轴上排列	row 、row-reverse、column、column-reverse	设置主轴的方向为水平方向或垂直方向，或它们的反向方向
justify-content	定义在主轴上的对齐方式，决定子元素如何沿着主轴排列	flex-start, center, flex-end, space-between, space-around, space-evenly	设置子元素在主轴上的对齐方式，如起点、中心、终点或均匀分布
align-items	定义在侧轴上的对齐方式，决定子元素如何沿着侧轴排列	flex-start, center, flex-end,baseline, stretch	设置子元素在侧轴上的对齐方式，如顶部对齐、底部对齐、中心对齐或按比例填充空间
flex-wrap	控制子元素是否换行，默认为nowrap，还有wrap和wrap-reverse可选	nowrap, wrap, wrap-reverse	控制子元素是否换行排列，或不换行反向排列
flex-flow	是flex-direction和flex-wrap的简写形式，用于设置主轴和侧轴的对齐方式	[row](javascript:void(0)) [nowrap](javascript:void(0)) 、 [row](javascript:void(0)) [wrap](javascript:void(0)) 、 [row](javascript:void(0)) [wrap-reverse](javascript:void(0)) 、 [column](javascript:void(0)) [nowrap](javascript:void(0)) 、 [column](javascript:void(0)) [wrap](javascript:void(0)) 、 [column](javascript:void(0)) [wrap-reverse](javascript:void(0))	设置主轴和侧轴的对齐方式，包括是否换行排列
align-content	当子元素在侧轴上有多行时，用于定义它们的对齐方式	flex-start, center, flex-end, space-between, space-around, space-evenly	当子元素有多行时，设置它们在侧轴上的对齐方式，如顶部对齐、底部对齐、中心对齐或均匀分布
flex-grow	用于设置元素的弹性空间，正值表示可以放大，0表示不放大	number (如 1, 2, …) 或 0 (default)	设置元素的弹性空间因子，可以放大元素的空间占用比例
flex-shrink	用于设置元素的弹性收缩，正值表示可以缩小，0表示不缩小	number (如 1, 2, …) 或 0 (default)	设置元素的弹性收缩因子，可以缩小元素的空间占用比例
flex-basis	用于设置元素的基本尺寸，类似于宽度或高度，但可被弹性空间调整	length (如 20px, 5em,) 或 auto (default)	设置元素的基本尺寸，可以影响弹性空间占用的尺寸比例

2、创建小程序项目

1. 在 index.wxml文件中添加如下标签

代码：

<navigation-bar title="Weixin" back