CSS详解系列:02-Flex容器属性

fox/ 2023年12月30日/ CSS教程/ 浏览 795

CSS 中提供了以下属性来实现 Flex 布局


属性描述
display指定 HTML 元素的盒子类型
flex-direction指定弹性盒子中子元素的排列方式
flex-wrap设置当弹性盒子的子元素超出父容器时是否换行
flex-flowflex-direction 和 flex-wrap 两个属性的简写
justify-content设置弹性盒子中元素在主轴(横轴)方向上的对齐方式
align-items设置弹性盒子中元素在侧轴(纵轴)方向上的对齐方式
align-content修改 flex-wrap 属性的行为,类似 align-items,但不是设置子元素对齐,而是设置行对齐
order设置弹性盒子中子元素的排列顺序
align-self在弹性盒子的子元素上使用,用来覆盖容器的 align-items 属性
flex设置弹性盒子中子元素如何分配空间
flex-grow设置弹性盒子的扩展比率
flex-shrink设置弹性盒子的收缩比率
flex-basis设置弹性盒子伸缩基准值


按照作用范围的不同,这些属性可以分为两类,分别为容器属性(flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content)和项目属性(order、align-self、flex、flex-grow、flex-shrink、flex-basis)。接下来的文章,我们会陆续介绍一下这些属性的使用。

发表评论

暂无评论,抢个沙发...

客服 工单