关于CSS - flex

web常见设置元素属性
flex:容器和item

flex container 弹性容器flex item 弹性盒子

flex容器将消除item的块状特性:

flex弹性盒子模型会消除会消除其item的块级属性,变为inline属性。同时也意味着位于弹性盒子模型下,设置块级属性都是无效的。默认是row水平排列。

关于reverse的解密:view元素默认100%宽度,reverse的对其,方向也会反转。

justify-content属性解析 :1用于控制子元素flex item的对其方向的。2space-between,space-around等距分布

flex 布局中:

有两个重要的概念 主轴和交叉轴

主轴取决于 flex-direction 的值,

flex-direction:column; 主轴为垂直方向的

flex-direction:row ; 主轴为水平方向

一旦确定主轴的方向后,

justify-content 指的是主轴方向的排布,

algin-items 指的是 交叉轴方向的 对齐方式


对于reverse作用后的主轴和交叉轴的方向示例

baseline与stretch:baseline子元素文字底线作为基线对其(参考第一个子元素对其),stretch交叉轴的拉伸(没有指定高度的情况下)

 flex-wrap与消除间距:产生换行效果,


flex换行默认的特性:产生间距


设置容器高度为两倍间距高度,巧妙消除间距
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容