flex 布局学习笔记

最近在看微信小程序的文档 ,因为小腾讯推荐小程序使用flex布局方式

但关于flex 布局能找到的教程实在太少

于是乎决定自己动手一个个试验一遍

一:首先 flex 是动态的 当设置的主轴不同时 justify-content 跟 align-items代表的含义是不一样的

二:justify-content 的flex-start ,flex-end 跟 align-items的 flex-start ,flex-end 是不一样的

三:需要注意的是justify-content  属性没有stretch这个值

而align-items可以设置为stretch 让元素自动占满空白位置

四:justify-content可以设置为space-around 或者space-between 控制元素之间的空隙

而align-items没有这个选项

五:按九宫格的分布方式

即当flex-direction为row时(注意justify-content与align-items需要写在盒子的样式里,而不是要布局的对象样式里)

1.justify-content:flex-start;  align-items:flex-start;为左上角

2.justify-content:center;  align-items:flex-start;为中上位置

3.justify-content:flex-end;  align-items:flex-start;为右上角

4.justify-content:flex-start;  align-items:center;为左中位置

5.justify-content:center;  align-items:center;为垂直居中位置

6.justify-content:flex-end;  align-items:center;为右中位置

7.justify-content:flex-start;  align-items:flex-end;为左下角

8.justify-content:center;  align-items:flex-end;为中下位置

9.justify-content:flex-end;  align-items:flex-end;为右下角

六: 注意align-self 的用法:

align-self 能控制对象在flexBox 内的位置

如align-self : flex-end; 使对象排在最后

注意:justify-content 和 align-items 都是作用于 盒子内的所有对象

而不是对象本身,要控制对象在盒子内的位置 使用align-self;

 


 

flex-flow有两个值

第一个是flex-direction 决定主轴的方向可选值有4个

1:row 从左到右排列    row-resever 就是从右到左排列

当主轴设置为row时

这时候 justify-content 影响的就是盒子内子元素与主轴平行时的分布(就是控制对象左右移动)

justify-content 属性的flex-start 就是在最左边  flex-end 就是在最右边,

而align-items影响的是对象与主轴垂直的分布(就是控制元素上下移动)

align-item属性的flex-start就是在最上边  flex-end 就是在最下边

2:column 从上到下排列     column-resever就是从下到上排列

这时候 justify-content 影响的就是子元素与主轴平行时的分布(就是控制子元素上下移动)

flex-start 就是在最上面  flex-end 就是在最下边,

而align-items影响的是子元素与主轴垂直的分布(就是控制元素左右移动)

align-item属性的flex-start就是在最左边  flex-end 就是在最右边

 3.justify-content与align-items的使用,

1.justify-content跟随主轴方向,align-items垂直主轴方向,

即当flex-direction为row时,justify-content决定盒子内的所有对象左右移动,align-items决定盒子内的所有对象上下移动,

当flex-direction为column时则justify-content决定盒子内的对象上下移动,而align-items决定盒子内的对象左右移动,

注意:justify-content与align-items都是写在flexbox的样式里,而不是需要调整位置的对象上

flex 布局学习笔记

转载请注明来源:幽幽过客_{flex 布局学习笔记}