⼩程序控件之view的flex布局（1）
我们接着上⼀章创建的WXView那个页⾯进⾏开发，今天我们开始学习，⼩程序的view控件，其实说是控件，我认为它更倾向于html⾥⾯的div标签，可以就把它理解为是div的⼀个变种。
先看demo的效果图：
效果图
我们就在.wxml⽂件⾥定义⼏个view。
xml⽂件
我们怎么把view横向排列呢，我们就要在样式⽂件进⾏配置了
wxss⽂件
⼤家看到我标红的两⾏代码，这两⾏代码让我定义的view1，2，3，4横向排列了，这就是弹性布局及flex布局。我们今天就来理⼀理，什么是flex布局。flex布局到底该怎么布。
什么是flex布局
Flex是Flexible Box的缩写，意为”弹性布局”，⽤来为盒状模型提供最⼤的灵活性。
采⽤Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有⼦元素⾃动成为容器成员，称为Flex项⽬（flex item），简称”项⽬”。下图标注了flex容器的架构图。
flex架构图
我们把flex理解为⼀个容器，箭头1所指的背景颜⾊为黄⾊的整个框，我们就认为是⼀个⼤的容器，箭头2 所指的蓝⾊的地⽅，可以认为是放在容器中的⼀个⼦元素(⼦元素叫做项⽬)。如图就可以理解为，当前Flex容器（flex container）中包含了3个⼦项⽬（flex item）。
另外，容器默认存在两根轴：⽔平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项⽬默认沿主轴排列。单个项⽬占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
flex容器的属性
第⼀个属性  flex-direc tio n
flex-direction属性决定主轴的⽅向（即⼦项⽬的排列⽅向）。
flex-direction:row |row-reverse|column|column-reverse;
flex-direction:row时候 demo的效果图为最上⾯的效果图；（row 表⽰该容器中的⼦元素即flex-item元素 从左到右依次排列）
（row 表⽰该容器中的⼦元素即flex-item元素 从左到右依次排列）
column：表⽰该容器中的⼦元素即flex-item元素 从上到下依次排列)
flex-direction:column 时候如下图：(column：表⽰该容器中的⼦元素即flex-item元素 从上到下依次排列
wxss⽂件
效果图
第⼆个属性  flex-w r a p
默认情况下，⼦元素都排在⼀条线（⼜称"轴线"）上。flex-wrap属性定义，如果⼀条轴线排不下，如何换⾏。我们来演⽰⼀下这种情况。
wxss⽂件
如图：我把容器设置为横向排列，⼦元素view1的宽度设置为容器的100%，view2，3，4分别为10%，容器的flex-wrap：nowrap 看看效果：
效果图
flex-wrap：nowrap 表⽰即使⼀⾏排不下，也不换⾏。（我在设置是让view1 的宽度占了整个屏幕的100%，按道理来说
view2，3，4应该被挤到下⼀⾏，然⽽并没有）
view2，3，4应该被挤到下⼀⾏，然⽽并没有
flex布局对齐方式同理 当flex-wrap：wrap时：
效果图
flex-wrap：wrap 表⽰⼀⾏排不下，就换⾏。
flex-wrap：wrap-reverse 换⾏，第⼀⾏在下⽅。（⾃⼰尝试下）
第三个属性  justify-c o ntent
justify-content属性定义了项⽬在主轴上的对齐⽅式。（可以理解为相对于X轴的位置）
justify-content:flex-start | flex-end | center | space-between | space-around;
默认属性 是flex-start效果图是最上⾯的效果图。即容器中的⼦元素左对齐
是flex-end表⽰容器中的⼦元素右对齐。效果图如下图：
wxcss⽂件
end效果图center表⽰容器中⼦元素居中。
center效果图space-between表⽰容器中⼦元素两端对齐，⼦元素之间的间隔相等
between效果图

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。