弹性盒子的属性

简介: 弹性盒子的属性

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。

目录
相关文章
|
11月前
|
程序员 测试技术
程序员的代码规范需求
程序员的代码规范需求
115 1
|
11月前
|
移动开发 JavaScript 前端开发
【JavaScript】JS执行机制--同步与异步
【JavaScript】JS执行机制--同步与异步
178 1
|
11月前
|
JavaScript 搜索推荐
JS中的模糊查询功能
JS中的模糊查询功能
132 1
|
11月前
|
JavaScript 前端开发
checkbox中checked属性总结
checkbox中checked属性总结
295 0
|
11月前
|
JavaScript 前端开发
JavaScript事件监听
JavaScript事件监听
110 0
|
11月前
|
XML 移动开发 前端开发
Canvas和SVG的区别
Canvas和SVG的区别
436 0
|
11月前
|
JavaScript 前端开发 内存技术
js文件的入口代码及需要入口代码的原因
js文件的入口代码及需要入口代码的原因
133 0
|
9月前
|
存储 监控 数据处理
【STM32】详细讲述 USART_IRQHandler() 的工作流程和原理
- UART5_IRQHandler的主要任务是响应各种UART中断事件并执行相应的处理。 - 典型的处理中断步骤包括检查中断类型、读取或写入数据寄存器、处理数据或错误、清除中断标志等。 - 实际的中断处理逻辑会根据具体应用的需求进行调整。
373 1
|
11月前
|
JavaScript 前端开发 索引
探索JavaScript数组:基础
探索JavaScript数组:基础
76 3
|
11月前
|
JavaScript
js文字如何轮播?
js文字如何轮播?
65 2