CSS弹性布局flex属性整理
创始人
2024-05-31 16:52:38
0

1.align-items

align-items属性:指定弹性布局内垂直方向的对齐方向。

常用属性:

center      垂直居中展示

flex-start   头部对齐

flex-end     底部对齐

2. justify-content

justify-content属性:属性(水平)对齐弹性容器的项目,当项目不占用主轴上所有可用空间时

常用属性:

flex-start:默认值。项目位于容器的开头

flex-end:项目位于容器的结尾

center:项目位于容器中央

space-between:项目在行与行之间留有间隔。

space-around:项目在行之前、行之间和行之后留有空间

3.align-self

align-self属性:用于指定弹性布局内某一个元素的垂直对齐方式,会覆盖布局的align-items属性。

常用属性:

center      元素居中

flex-start   元素位于头部

flex-end     元素位于底部

4.align-content

align-content属性:用于修改flex-wrap属性的行为,与align-items 相似,但不用于对齐项目,而是用于对齐弹性线(垂直方向),必须有多行项目,该属性才生效。

常用属性:

center      垂直居中展示

flex-start   头部对齐

flex-end     底部对齐

space-between   两端对齐

space-around      均分

5. flex-basis

flex-basis属性:属性规定弹性项目的初始长度,可以设置某一个弹性元素的长度

6.flex-direction

flex-direction属性:属性规定弹性项目的方向

常用属性:

row:默认值。作为一行,水平地显示弹性项目。

row-reverse:等同行,但方向相反。

column:作为列,垂直地显示弹性项目

column-reverse:等同列,但方向相反

7. flex-wrap

flex-wrap属性:属性规定弹性项目是否应换行

常用属性:

nowrap:默认值。规定弹性项目不会换行

wrap:规定弹性项目会在需要时换行

wrap-reverse:规定弹性项目会在需要时换行,以反方向

8. flex-flow

flex-flow属性:flex-direction、flex-wrap属性的简写

flex-direction:规定弹性项目方向

flex-wrap:是否换行

9.flex-grow

flex-grow属性:属性规定在相同的容器中,项目相对于其余弹性项目的增长量

10.flex-shrink

flex-shrink属性:属性固定在相同的容器中,项目相对于其余弹性项目的收缩量、

11.flex 

flex属性:flex-grow、flex-shrink、flex-basis属性的简写

flex-grow:相对于其余的增长量

flex-shrink:相对于其他的收缩量

flex-basis:项目的长度

相关内容

热门资讯

监控摄像头接入GB28181平... 流程简介将监控摄像头的视频在网站和APP中直播,要解决的几个问题是:1&...
Windows10添加群晖磁盘... 在使用群晖NAS时,我们需要通过本地映射的方式把NAS映射成本地的一块磁盘使用。 通过...
protocol buffer... 目录 目录 什么是protocol buffer 1.protobuf 1.1安装  1.2使用...
在Word、WPS中插入AxM... 引言 我最近需要写一些文章,在排版时发现AxMath插入的公式竟然会导致行间距异常&#...
【PdgCntEditor】解... 一、问题背景 大部分的图书对应的PDF,目录中的页码并非PDF中直接索引的页码...
修复 爱普生 EPSON L4... L4151 L4153 L4156 L4158 L4163 L4165 L4166 L4168 L4...
Fluent中创建监测点 1 概述某些仿真问题,需要创建监测点,用于获取空间定点的数据࿰...
educoder数据结构与算法...                                                   ...
MySQL下载和安装(Wind... 前言:刚换了一台电脑,里面所有东西都需要重新配置,习惯了所...
MFC文件操作  MFC提供了一个文件操作的基类CFile,这个类提供了一个没有缓存的二进制格式的磁盘...