CSS弹性布局flex属性整理
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:项目的长度
相关文章
- 【技术种草】cdn+轻量服务器+hugo=让博客“云原生”一下
- CLB运维&运营最佳实践 ---访问日志大洞察
- vnc方式登陆服务器
- 轻松学排序算法:眼睛直观感受几种常用排序算法
- 十二个经典的大数据项目
- 为什么使用 CDN 内容分发网络?
- 大数据——大数据默认端口号列表
- Weld 1.1.5.Final,JSR-299 的框架
- JavaFX 2012:彻底开源
- 提升as3程序性能的十大要点
- 通过凸面几何学进行独立于边际的在线多类学习
- 利用行动影响的规律性和部分已知的模型进行离线强化学习
- ModelLight:基于模型的交通信号控制的元强化学习
- 浅谈Visual Source Safe项目分支
- 基于先验知识的递归卡尔曼滤波的代理人联合状态和输入估计
- 结合网络结构和非线性恢复来提高声誉评估的性能
- 最佳实践丨云开发CloudBase多环境管理实践
- TimeVAE:用于生成多变量时间序列的变异自动编码器
- 具有线性阈值激活的神经网络:结构和算法
- 内网渗透之横向移动 -- 从域外向域内进行密码喷洒攻击