弹性盒子的属性

简介: 弹性盒子的属性

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。

目录
相关文章
弹性盒子的属性
弹性盒子的属性
|
前端开发 容器
css中的弹性盒子和弹性布局
css中的弹性盒子和弹性布局
125 0
|
容器
弹性布局(display:flex)属性详解
弹性布局(display:flex)属性详解
266 1
|
7月前
|
容器
关于弹性布局
关于弹性布局
62 1
|
3月前
|
前端开发 容器
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等,解释了这些属性在弹性盒子布局中的作用和用法。
|
4月前
|
前端开发 容器
实现弹性盒子(Flexbox)中一行多个 div 平摊排列
这篇文章介绍了如何使用CSS Flexbox布局来实现一行内多个div的自动平摊排列,包括水平均匀分布和非均匀分布排列的方法,并提供了相应的HTML和CSS代码示例。
实现弹性盒子(Flexbox)中一行多个 div 平摊排列
|
4月前
|
前端开发 容器
掌握弹性盒子布局(Flex):打造灵活的网页布局
掌握弹性盒子布局(Flex):打造灵活的网页布局
|
7月前
|
前端开发 容器
弹性布局是?
弹性布局是?
教你快速上手Flex弹性盒布局(项目属性)
教你快速上手Flex弹性盒布局(项目属性)
教你快速上手Flex弹性盒布局(容器属性)(二)
教你快速上手Flex弹性盒布局(容器属性)