一、理解flex容器与元素
二、flex容器属性
- flex-direction:决定元素的排列方向(即设置主轴),默认为row
-
- flex-direction: column;
- flex-direction: row;
- flex-wrap:当元素一行排列不下时,决定元素如何换行,默认为nowrap
-
- flex-wrap:nowrap;
- flex-wrap:wrap;
- flex-wrap:wrap-reverse;
- flex-flow:flex-direction与flex-wrap的简写
- justify-content:元素在主轴上的对齐方式.默认是flex-start
-
- justify-content:center
- justify-content:flex-start
- justify-content:flex-end
- justify-content:space-around,容器中每个子元素的两端相等,子元素之间的间隔比子元素与边框的间隔大一倍。
- justify-content:space-between,容器中子元素两端对齐,子元素之间的间隔相等
- align-items:元素在交叉轴的对齐方式,默认为stretch
-
- align-items:center;
- align-items:flex-start;
- align-items:flex-end;
![微信小程序flex布局(容器属性) 微信小程序flex布局(容器属性)](https://i-blog.csdnimg.cn/blog_migrate/6672a19bc2a88aed1736f1ce0331e741.gif)
![微信小程序flex布局(容器属性) 微信小程序flex布局(容器属性)](https://i-blog.csdnimg.cn/blog_migrate/1859b202ed3d4aca7244573d4f3c269b.gif)
- align-items:baseline;文字在同一水平线上
![微信小程序flex布局(容器属性) 微信小程序flex布局(容器属性)](https://i-blog.csdnimg.cn/blog_migrate/d8b4e8efd533969e36eafe119daf1c87.gif)
![微信小程序flex布局(容器属性) 微信小程序flex布局(容器属性)](https://i-blog.csdnimg.cn/blog_migrate/d0ed367ddea23b209ae4d6caa082424d.gif)
- align-items:stretch;如果项目未设置高度或设为auto,将占满整个容器的高度
![微信小程序flex布局(容器属性) 微信小程序flex布局(容器属性)](https://i-blog.csdnimg.cn/blog_migrate/39fd9f1f601ee705fd0fd2b59545e0f9.gif)
![微信小程序flex布局(容器属性) 微信小程序flex布局(容器属性)](https://i-blog.csdnimg.cn/blog_migrate/607d9a3d989e631faa699168a5facdfd.gif)