flex.css

.flex { display: -webkit-box; display: -webkit-flex; display: flex; }

.inline-flex { /* 内敛元素 */ display: inline-flex; }

.flex-item { -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; }

/* 容器上 start*/

.direction-row { /* (默认)主轴为水平方向,起点在左端 */ flex-direction: row; }

.direction-row-reverse { /* 主轴为水平方向,起点在右端 */ flex-direction: row-reverse; }

.direction-column { /* 主轴为垂直方向,起点在上沿 */ flex-direction: column; }

.direction-column-reverse { /* 主轴为垂直方向,起点在下沿。*/ flex-direction: column-reverse; }

.flex-nowrap { /* flex不换行 */ flex-wrap: nowrap; }

.flex-wrap { /* flex第一行在上方 */ flex-wrap: wrap; }

.flex-wrap-reverse { /* flex第一行在下方 */ flex-wrap: wrap-reverse; }

/* justify 横向对齐方式 */

.justify-start { /* 左对齐 */ justify-content: flex-start; }

.justify-end { /* 右对齐 */ justify-content: flex-end; }

.justify-center { /* 居中 */ justify-content: center; }

.justify-between { /* 等宽排列 */ justify-content: space-between; }

.justify-around { /* 分散排列*/ justify-content: space-around; }

/* align 上下对齐方式 */

.align-start { /* 上对齐 */ align-items: flex-start; }

.align-end { /* 下对齐 */ align-items: flex-end; }

.align-center { /* 上下居中 */ align-items: center; }

.align-baseline { /* 项目的第一行文字的基线对齐 */ align-items: baseline; }

.align-stretch { /* 如果项目未设置高度或设为auto,将占满整个容器的高度。 */ align-items: stretch; }

/* 容器上 end*/

/* 项目上start */

.align-self-auto { /* 继承父元素排列方式 */ align-self: auto; }

.align-self-start { /* 上对齐 */ align-self: flex-start; }

.align-self-end { /* 下对齐 */ align-self: flex-end; }

.align-self-center { /* 上下居中 */ align-self: center; }

.align-self-baseline { /* 项目的第一行文字的基线对齐 */ align-self: baseline; }

.align-self-stretch { /* 如果项目未设置高度或设为auto,将占满整个容器的高度。 */ align-self: stretch; }

/* 项目上end */

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • ubuntu 系统 安装东西

    余生
  • Vue+MySQL+Express vue链接数据库

    npm install -g cnpm --registry=http://registry.npm.taobao.org

    余生
  • EditorConfig 的配置

    # EditorConfig文件使用INI格式。斜杠(/)作为路径分隔符,#或者;作为注释。路径支持通配符:

    余生
  • Python 实现单向循环链表

    循环链表的概念 1.什么是循环链表   所谓的循环链表就是让单向链表的首尾相连,组成一个环状。 2.循环链表的典型应用   约瑟夫环问题。 3.实现循环链表的重...

    YingJoy_
  • Tomcat环境部署

    环境说明 系统版本:CentOS 7.2 x86_64 软件版本:jdk-8u171、tomcat-8.0.27 Jdk的下载地址 Tomcat的下载地...

    山山仙人
  • Linux下Tomcat使用详解

    版权声明:本文为木偶人shaon原创文章,转载请注明原文地址,非常感谢。 https://b...

    shaonbean
  • Java Web之tomcat开机后台启动

    Windows下安装好了tomcat了以后,可以直接进如 bin 目录双击 startup.bat 来启动,但是这样启动有一个文集就是任务栏会一直存在一个小窗...

    YungFan
  • 张星亮:SaaS没有错,但不要用新技术做美国十年前做的事

    SaaS颠覆传统软件到底是不是一个伪命题?SaaS死了吗?最近这些问题引起圈内讨论。

    人称T客
  • Linux学习10-CentOS搭建nginx负载均衡环境

    当自己的web网站访问的人越来越多,一台服务器无法满足现有的业务时,此时会想到多加几台服务器来实现负载均衡。 网站的访问量越来越大,服务器的服务模式也得进行相应...

    上海-悠悠
  • 五分之四全失败 SaaS创业如何避免高失亡率?

    据IDC报告,未来五年,中国SaaS市场增速将是传统软件市场的10倍,这也是为什么很多创业公司选择以SaaS模式为企点的原因。诚然,这是个利好的市场,但据彭博(...

    企鹅号小编

扫码关注云+社区

领取腾讯云代金券