前端flex布局

1.1 flex有哪些属性 这些属性分别配置了什么

flex容器上的属性

flex-direction:用于指定 Flex 容器内子元素的主轴方向。

flex-direction: column; 主轴方向为垂直方向,起点在上沿;

flex-direction: column-reverse; 主轴方向为垂直方向,起点在下沿

flex-direction: row; 主轴为水平方向,起点在左端。

flex-direction: row-reverse; 主轴为水平方向,起点在右端。

justify-content: 用于控制 Flex 容器内子元素在主轴上的对齐方式。

align-items: 用于控制 Flex 容器内子元素在交叉轴上的对齐方式。

flex-wrap:用于控制子元素是否换行

align-content:用于控制多行子元素在交叉轴上的对齐方式

flex-flow: 属性能够更简便地同时设置主轴方向和子元素是否换行

flex-grow:指定 Flex 项目的放大比例,决定了子元素在剩余空间中分配的比例。

flex-shrink:指定 Flex 项目的缩小比例,决定了子元素在空间不足时收缩的比例

flex-basis:设置 Flex 项目在分配多余空间之前的基础大小

order: number:用于指定 Flex 项目的排列顺序,数值越小越靠前,默认为 0

align-self: 是用于在 Flex 布局中控制单个 Flex 项目(子元素)在交叉轴上的对齐方式的 CSS 属性。

flex:用于设置弹性盒子容器中的子元素如何分配剩余空间。

1.2 flex:1 代表着什么

当设置flex:1时,元素的尺寸会根据父容器的剩余空间分配,并且会被拉伸或收缩以填充剩余空间。如果父容器有多个子元素,则其中一个设置有flex:1的子元素会占用所有剩余的可用空间。

当所有子元素都设置为flex:1时,它们将平均分配父容器的可用空间。如果某个子元素具有固定的宽度或高度,那么它将不会被拉伸或收缩,并且其他子元素将占用剩余的空间。

flex:1;===flex: 1 1 0 ;等同于 flex-grow:1;flex-shrink:1;flex-basis:0,元素可以在flex-basis为 0 的基础上伸缩。

tips: flex:2 呢???

flex:2;===flex: 2 1 0 ;等同于 flex-grow:2;flex-shrink:1;flex-basis:0,元素可以在flex-basis为 0 的基础上伸缩。

1.3 使用flex布局有什么优势?为什么会有flex? 跟传统的布局有什么区别?

(1) flex布局优势:

flex布局,可以简便、完整、响应式地实现各种页面布局,可为复杂的布局和对齐问题提供了更简洁、预测性和弹性的解决方案。Flex容器可以不基于固定尺寸动态地调整其大小。对于响应式设计尤其有用。

(2) 为什么会有flex?

在响应式设计、移动优先策略以及多种设备和屏幕尺寸的背景下,传统的布局方法(浮动和定位)表现得非常受限。Flex布局被引入CSS规范,主要是为了解决这些问题,使布局更加直观和一致。

(3) 跟传统的布局有什么区别?

浮动布局:在浮动布局中,元素会脱离文档流。这会导致清除浮动的问题,并需要额外的代码来确保正确的布局。

定位布局:定位布局使用position属性(如relative、absolute、fixed)来控制元素的位置。这常常导致层叠和重叠的问题,并且需要手动管理位置和堆栈顺序。

相较于这些方法,flex布局提供了更直观、更简单的布局方式。

相关推荐
我狸才不是赔钱货9 分钟前
前端技术栈全景图:从HTML到现代框架的演进之路
前端·html
百花~37 分钟前
前端三剑客之一 HTML~
前端·html
lang201509281 小时前
Spring远程调用与Web服务全解析
java·前端·spring
listhi5203 小时前
利用React Hooks简化状态管理
前端·javascript·react.js
一点一木3 小时前
🚀 2025 年 10 月 GitHub 十大热门项目排行榜 🔥
前端·人工智能·github
华仔啊4 小时前
这个Vue3旋转菜单组件让项目颜值提升200%!支持多种主题,拿来即用
前端·javascript·css
非凡ghost4 小时前
Adobe Lightroom安卓版(手机调色软件)绿色版
前端·windows·adobe·智能手机·软件需求
BestAns5 小时前
Postman 平替?这款轻量接口测试工具,本地运行 + 批量回归超实用!
前端
专注前端30年5 小时前
Webpack进阶玩法全解析(性能优化+高级配置)
前端·webpack·性能优化
烛阴5 小时前
Lua世界的基石:变量、作用域与七大数据类型
前端·lua