![](https://img.haomeiwen.com/i2926249/a8f6dd782401d267.jpg)
![](https://img.haomeiwen.com/i2926249/c1e5c0ce4d559a74.png)
flex container 弹性容器flex item 弹性盒子
flex容器将消除item的块状特性:
flex弹性盒子模型会消除会消除其item的块级属性,变为inline属性。同时也意味着位于弹性盒子模型下,设置块级属性都是无效的。默认是row水平排列。
关于reverse的解密:view元素默认100%宽度,reverse的对其,方向也会反转。
justify-content属性解析 :1用于控制子元素flex item的对其方向的。2space-between,space-around等距分布
![](https://img.haomeiwen.com/i2926249/d0cce3a7f48f1eba.png)
flex 布局中:
有两个重要的概念 主轴和交叉轴
主轴取决于 flex-direction 的值,
flex-direction:column; 主轴为垂直方向的
flex-direction:row ; 主轴为水平方向
一旦确定主轴的方向后,
justify-content 指的是主轴方向的排布,
algin-items 指的是 交叉轴方向的 对齐方式
![](https://img.haomeiwen.com/i2926249/a5b609cc383f918a.png)
baseline与stretch:baseline子元素文字底线作为基线对其(参考第一个子元素对其),stretch交叉轴的拉伸(没有指定高度的情况下)
![](https://img.haomeiwen.com/i2926249/9261dcc1ec9bd04c.png)
flex-wrap与消除间距:产生换行效果,
![](https://img.haomeiwen.com/i2926249/128c200b9986dd54.png)
![](https://img.haomeiwen.com/i2926249/c7c48d56924f2ea7.png)
网友评论