微信小程序第一天(frex - direction && justify- content && align- items)

/** frex - direction | 弹性容器的布局方向 */

frex - direction : row 3个视图View的横向布局


微信小程序第一天(frex - direction && justify- content && align- items)_第1张图片
E897D467-4122-4506-83AB-DE69D1703E01.png

frex - direction : column 3个视图View(竖)列布局


微信小程序第一天(frex - direction && justify- content && align- items)_第2张图片
1335B778-56C5-4560-AAE0-823D27479F7C.png

/** justify- content */


微信小程序第一天(frex - direction && justify- content && align- items)_第3张图片
51201FF4-11DD-4F02-A0A3-5D144E69C87D.png

/** align- items */


微信小程序第一天(frex - direction && justify- content && align- items)_第4张图片
7C53F475-8D36-435E-A9D2-D874F4AF267D.png

flex - start -> 放在视图的最顶部


微信小程序第一天(frex - direction && justify- content && align- items)_第5张图片
ADAD29F5-175F-4CEF-8626-B37CE6CB6117.png
微信小程序第一天(frex - direction && justify- content && align- items)_第6张图片
7074B5EB-1023-4632-8D5F-F30026537141.png
微信小程序第一天(frex - direction && justify- content && align- items)_第7张图片
76DFC2DE-B50F-4579-ADD9-602E2F7B6F5C.png

你可能感兴趣的:(微信小程序第一天(frex - direction && justify- content && align- items))