flex vue 垂直居中居上_flex 垂直居中、两列对齐、自适应宽[通俗易懂]

flex vue 垂直居中居上_flex 垂直居中、两列对齐、自适应宽[通俗易懂]####flex垂直居中#parent{display:flex;width:300px;height:300px;outline:solid1px;justify-content:center;align-content:center;//主轴居中对齐align-items:center;//交叉轴的中点对齐}#child{width:100px;height:100px;outlin…

大家好,又见面了,我是你们的朋友全栈君。

####flex 垂直居中

#parent {

display:flex;

width:300px;

height:300px;

outline:solid 1px;

justify-content:center;

align-content:center; //主轴居中对齐

align-items:center;//交叉轴的中点对齐

}

#child {

width:100px;

height:100px;

outline:solid 1px;

}

####flex 两列等高

hahjdjjajdES6提供的Proxy可以让JS开发者很方便的使用代理模式,听说Vue

.parent{

width: 300px;

display: flex;

align-content: center;

justify-content: center;

align-items: stretch;

}

.child{

width: 100px;

outline: solid 1px;

}

align-items:交叉轴的对齐方式 flex-start:交叉轴的起点对齐。 flex-end:交叉轴的终点对齐。 center:交叉轴的中点对齐。 baseline: 项目的第一行文字的基线对齐。 stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。

####flex 自适应宽

.child1 {

width:100px;

background-color:lightblue;

}

.child2 {

width:100px;

flex:1;

outline:solid 1px;

}

flex:1是flex-grow,flex-shrink,flex-basis的缩写 flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大 flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。 flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/137947.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • sql2008“备份集中的数据库备份与现有的xx数据库不同”解决方法[通俗易懂]

    sql2008“备份集中的数据库备份与现有的xx数据库不同”解决方法[通俗易懂]原文链接:http://www.cnblogs.com/huangfr/archive/2012/08/09/2629687.html1.因为是在另一台电脑对同名数据库做的备份,用常规方法还原,提示不是相同数据库,不让还原,在网上找到下面的方法解决了:一、右击系统数据库master,新建查询执行以下SQL代码:RESTOREDATABASExxxFROMDI

  • 进程间通信之CreatePipe

    进程间通信之CreatePipeCreatePipefunction创建匿名管道,返回读,写管道的handle。

  • 使用instsrv.exe+srvany.exe将应用程序安装为windows服务的方法

    使用instsrv.exe+srvany.exe将应用程序安装为windows服务的方法一、什么是instsrv.exe和srvany.exeinstsrv.exe.exe和srvany.exe是MicrosoftWindowsResourceKits工具集中的两个实用工具,这两个工具配合使用可以将任何的exe应用程序作为window服务运行。srany.exe是注册程序的服务外壳,可以通过它让应用程序以system账号启动,可以使应用程序作为windows的服务随机器启动而自动启动,从而隐藏不必要的窗口,例如:应用程序控制台等。那么我们肯定想是不是安装srvany.exe就可以完成

  • 自动化运维平台Spug介绍

    自动化运维平台Spug介绍一、概要Spug是一款使用Python+Flask+Vue+Element组件开发的开源运维管理系统,系统前后端分离,项目创建于2017年,2018年2月第一个开源运维平台版本发布,设计为面向中小型企业设计的轻量级无Agent的自动化运维平台,UI基于AntDesign设计,整合了主机管理、主机批量执行、主机在线终端、应用发布部署、在线任务计划、配置中心、监控、报警等一系列功能,且二次开发很方便。它采用授权协议AGPL-3.0,使用开发语言PythonJavaScript;软件采用无Agen

  • android之ArrayAdapter的重写

    昨天介绍了ArrayAdapter的使用,今天介绍一下更加实用的一点,对它进行重写,满足自己的个性化设计需要.ArrayAdapter(数组适配器)一般用于显示一行文本信息,所以比较容易。public ArrayAdapter(Context context,int textViewResourceId, List objects)上面的这行代码来装配数据,要装配这些数据就需要一个连接

  • SQL分页查询_Sql根据某个字段分页

    SQL分页查询_Sql根据某个字段分页SQL分页查询:背景​ 在公司的系统中有一个平台是做配置管理的就是所谓的CRUD的平台,但是点击后进去到页面第一次看到的是一次查询的页面(点击页面自动的触发查询的功能)后面就可以你的CRUD的操作是给运营的同事来操作的,但是一般的是我们数据量比较的少的业务是之间查询出来所有的数据,直接返回给前端的让他自己做分页的,但是有一些数据量达到上万级别的时候,不能让他们乱搞了,…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号