前端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布局提供了更直观、更简单的布局方式。

相关推荐
清灵xmf12 分钟前
npm install --legacy-peer-deps:它到底做了什么,什么时候该用?
前端·npm·node.js
超级大只老咪1 小时前
字段行居中(HTML基础语法)
前端·css·html
IT_陈寒1 小时前
Python开发者必看!10个高效数据处理技巧让你的Pandas代码提速300%
前端·人工智能·后端
只_只1 小时前
npm install sqlite3时报错解决
前端·npm·node.js
FuckPatience1 小时前
Vue ASP.Net Core WebApi 前后端传参
前端·javascript·vue.js
数字冰雹1 小时前
图观 流渲染打包服务器
服务器·前端·github·数据可视化
JarvanMo1 小时前
Flutter:我在网上看到了一个超炫的动画边框,于是我在 Flutter 里把它实现了出来
前端
returnfalse1 小时前
前端性能优化-第三篇(JavaScript执行优化)
前端·性能优化
yuzhiboyouye1 小时前
前端架构师,是架构什么
前端·架构
全马必破三2 小时前
Buffer:Node.js 里处理二进制数据的 “小工具”
前端·node.js