align-content/align-items
2018-08-23 本文已影响0人
大写的空气
align-content
align-content属性:主要用于垂直方向排布,如需要使用水平方向排布,使用justify-content属性。同时配置:display:flex;
stretch:默认值,子元素被拉伸以适应容器。顶部不留间距,子元素间留有间距
![](https://img.haomeiwen.com/i9129568/30bbe56a00456a73.png)
center
![](https://img.haomeiwen.com/i9129568/0afafebe09d01e7d.png)
flex-start
![](https://img.haomeiwen.com/i9129568/3dbd1f11b3cf73f0.png)
flex-end:通过上图联想
space-between
![](https://img.haomeiwen.com/i9129568/f5ad10cb70840334.png)
space-around
![](https://img.haomeiwen.com/i9129568/e699f7cc499ef1a9.png)
align-items
align-items属性定义flex子项在当前行的纵轴方向上的对齐方式
![](https://img.haomeiwen.com/i9129568/e785f556f612d929.png)
flex:1 //使视图在横坐标自动填满
上面代码效果
![](https://img.haomeiwen.com/i9129568/3e03c131744be19e.png)
flex-start
![](https://img.haomeiwen.com/i9129568/b984ce9c7094ba5f.png)
其他逻辑与上面align-content类似
如需要控制弹性对象内的某个项时,使用 align-self赋值此项