CSS Flex 布局的 flex-direction 属性讲解
2023-06-13 09:16:13 时间
flex-direction
设置了主轴,从而定义了弹性项目放置在弹性容器中的方向。
Flexbox 是一种单向布局概念,可将弹性项目视为主要以水平行或垂直列布局。
.container {
flex-direction: row | row-reverse | column | column-reverse;
}
几种支持的属性:
- row (default): left to right in ltr; right to left in rtl
- row-reverse: right to left in ltr; left to right in rtl
- column: 和 row 属性工作原理相同,只不过是从 top 到 bottom 布局
- column-reverse: 同 row-reverse,只不过是从 bottom 到 top
flex-grow 属性
该属性定义了 flex item 在必要时增长宽度的能力。它接受一个作为比例的无单位值。 它规定了项目应该占用弹性容器内的可用空间量。
下图第一行,三个元素的 flex item 的 flex-grow 都为 1,因此共同平分 flex 容器剩余的宽度。
下图第二行中间的 flex item 的 flex-grow 属性为 2,其他两个元素为 1,因此宽度比例为1:2:1.
如果所有项目都将 flex-grow 设置为 1,则容器中的剩余空间将平均分配给所有子项。 如果其中一个 item 元素的值为 2,则该 item 将占据其他 item 的两倍空间(或者至少会尝试)。
justify-content
该属性定义了沿主轴的对齐方式。 当一行中的所有 flex 项目已达到其最大大小时,它有助于分配剩余的额外可用空间。 当项目溢出线时,它还对项目的对齐施加一些控制。
- flex-start(默认):项目被打包到 flex-direction 的开始。
- flex-end:项目被打包到 flex-direction 的末端。
- start: items 被打包到 writing-mode 方向的开始。
- end:项目被打包到书写模式方向的末尾。
- left:项目被打包到容器的左边缘,除非这对 flex-direction 没有意义,否则它的行为就像开始。
- right:项目被打包到容器的右边缘,除非这对 flex-direction 没有意义,否则它的行为就像 end。
- 中心:项目沿线居中
- space-between:项目在行中均匀分布; 第一项在开始行,最后一项在结束行
- space-around:项目均匀分布在一行中,周围的空间相等。 请注意,从视觉上看,空间并不相等,因为所有项目的两侧都有相等的空间。 第一个项目将在容器边缘有一个空间单位,但下一个项目之间有两个单位的空间,因为下一个项目有自己适用的间距。
- space-evenly:项目分布使得任意两个项目之间的间距(以及到边缘的空间)相等。
相关文章
- css规则定义的分类,CSS规则定义英汉对照表[通俗易懂]
- 快速获取子图根节点的属性
- 【说站】css中transition的四种属性
- 【说站】css中align-self属性是什么
- 【说站】css中counter-reset属性是什么
- 【说站】css中word-break属性是什么
- 【新!超详细】Figma组件属性完全指南
- js遍历对象属性的一些方法有哪些_js面试遍历对象的所有属性
- 2022 最受欢迎的 CSS 变量、属性、函数以及颜色分别是什么
- CSS属性继承有哪些?(回顾)
- 从微信聊天框开始学习CSS属性filter
- 【CSS】盒子模型外边距 ① ( 盒子模型外边距设置 | 外边距属性单独设置 | 外边距属性复合写法 )
- WordPress 主题教程 #9:Style.css 和 CSS 介绍
- Spring的cglib代理类无法取到被代理类的成员属性
- JS字符串的常用属性和方法
- CSS 属性选择器
- 优化提升效率:Oracle属性表的优化策略(oracle属性表)
- CSS 属性选择器
- CSS如何影响MySQL的使用(css影响MySQL)
- Oracle事务传播属性守护数据安全(oracle事务传播属性)
- CSS属性-white-space空白属性使用说明
- CSS顶级技巧大放送,div+css布局必知
- JavaScriptprototype属性使用说明
- jQuery获取对象根据属性、内容匹配,还有表单元素匹配
- c#后台修改前台DOM的css属性示例代码
- js调用css属性写法
- JS批量操作CSS属性详细解析
- JS通过分析userAgent属性来判断浏览器的类型及版本
- 从零学Python之引用和类属性的初步理解
- Ruby简洁学习笔记(二):类继承、属性、类变量
- 一个通过script自定义属性传递配置参数的方法