弹性盒子的属性

简介: 弹性盒子的属性

display:指定元素使用弹性盒子布局,属性值为 flex 或 inline-flex。


flex-direction:指定弹性盒子主轴的方向,属性值可以是 row(默认值,主轴为水平方向)、row-reverse(主轴为水平方向,但从右到左排列)、column(主轴为垂直方向)或 column-reverse(主轴为垂直方向,但从下到上排列)。


justify-content:指定弹性盒子在主轴上的对齐方式,属性值可以是 flex-start(默认值,从起点对齐)、flex-end(从终点对齐)、center(居中对齐)、space-between(两端对齐,项目之间间距相等)或 space-around(每个项目两侧的间距相等)。


align-items:指定弹性盒子在交叉轴上的对齐方式,属性值可以是 flex-start(从起点对齐)、flex-end(从终点对齐)、center(居中对齐)、baseline(基线对齐)或 stretch(默认值,拉伸对齐)。

flex-wrap:指定弹性盒子是否换行。属性值可以是 nowrap(不换行)、wrap(换行)或 wrap-reverse(反向换行)。


flex-flow:flex-direction 和 flex-wrap 的缩写。


align-content:多条轴线的对齐方式。属性值可以是 flex-start、flex-end、center、space-between、space-around 或 stretch(默认值,每条轴线占满整个交叉轴)。


flex:指定项目的伸缩比例,默认为 0。如果一个项目的 flex 为 2,另一个项目的 flex 为 1,则前者占据的空间是后者的两倍。


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

目录
相关文章
|
前端开发 容器
web前端------弹性盒子
web前端------弹性盒子
手把手教你将uView UI配置到uniapp项目中
手把手教你将uView UI配置到uniapp项目中
2172 0
手把手教你将uView UI配置到uniapp项目中
|
前端开发 JavaScript 数据可视化
推荐! 使用react-cropper-pro实现图片裁切压缩上传
推荐! 使用react-cropper-pro实现图片裁切压缩上传
651 0
|
存储
(pinia-plugin-persistedstate)pinia 持久化存储
(pinia-plugin-persistedstate)pinia 持久化存储
1561 1
|
定位技术 API 开发工具
iOS测试技巧:GPX文件修改经纬度(com.apple.dt.simulatelocation)
iOS测试技巧:GPX文件修改经纬度(com.apple.dt.simulatelocation)
2350 0
iOS测试技巧:GPX文件修改经纬度(com.apple.dt.simulatelocation)
|
11月前
|
存储 人工智能 安全
MCP 规范新版本特性全景解析与落地实践
MCP Specification 在 2025-03-26 发布了最新的版本,本文对主要的改动进行详细介绍和解释
2032 145
|
前端开发 容器
css布局-弹性布局学习笔记
这篇文章是关于CSS弹性布局的学习笔记,详细介绍了flex容器和元素的相关属性,包括flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content以及order、flex-grow、flex-shrink、flex-basis、flex和align-self等,解释了这些属性在弹性盒子布局中的作用和用法。
|
存储 监控 数据处理
【STM32】详细讲述 USART_IRQHandler() 的工作流程和原理
- UART5_IRQHandler的主要任务是响应各种UART中断事件并执行相应的处理。 - 典型的处理中断步骤包括检查中断类型、读取或写入数据寄存器、处理数据或错误、清除中断标志等。 - 实际的中断处理逻辑会根据具体应用的需求进行调整。
706 1
如何在项目中使用Moment.js库?
如何在项目中使用Moment.js库?
.cer 文件添加到钥匙串报错:不能修改“System Roots”钥匙串
1、报错信息: 不能修改“System Roots”钥匙串: 要更改根证书是否会被信任,请在“钥匙串访问”中打开它,然后修改它的信任设置 2、网上搜索的答案都是: 钥匙串访问的界面左侧,选择“登录”或login按钮,直接将.
6807 0