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)


相关推荐

  • Android studio 入门教程(案例)

    Android studio 入门教程(案例) 1.创建一个Android项目,点击File->New->NewProject,其中的open是打开一个Android项目2.输入项目的名称test,此项目放在E盘下,然后点击Finish3.选择Android虚拟机的版本,版本越低运行起来越快,其他的无需勾选。 4.选择Android的模板,选择基础类android的空模板Empty…

  • 2021年十大开源web应用防火墙

    2021年十大开源web应用防火墙开源web应用防火墙是网络安全的重要部分,Cloudflare认为:十年后数字经济的网络安全基础设施会像水过滤系统一样普及,而这个过滤系统的核心就是waf。对于服务器来说,部署WEB应用防火墙十分重要,笔者经过大量搜索,并结合市场热度,整理出2021年十大开源web应用防火墙。1、OpenRestyOpenResty是由中国人章亦春发起,把nginx和各种三方模块的一个打包而成的软件平台,核心就是nginx+lua脚本语言。主要是因为nginx是C语言编写,修改很复杂,而lua语言则简单得多,国内很多

  • MySQL图形工具SQLyog激活成功教程版

    MySQL图形工具SQLyog激活成功教程版最近一直在用MySQL,所以分享一下现在这套开发工具。SQLyog:链接:http://pan.baidu.com/s/1bLq2OA密码:h5bj注册信息用户名:yunjian注册码:81f43d3dd20872b6JavaIDE工具:IDEA设计工具:PowerDesion数据库:MySQL转载于:https://www.cnbl…

  • java初级求职简历,初级Java软件工程师求职简历范文[通俗易懂]

    求职目标:Java软件工程师姓名:张XX年龄:24岁住址:北京市朝阳区电话:135xxxxxxxx邮箱:lucky@ijianli.com教育背景2013.09-至今??XXXXX大学??通信工程(本科)主修课程:电路理论基础、电子线路(线性与非线性)、电磁场理论、数字图像处理、数字系统与逻辑设计、单片机原理及其接口技术、信号与线性系统、数字信号处理、微机原理与测控技术、计算机网络与数据…

  • 页面跳转的两种方式(转发和重定向)区别及应用场景分析「建议收藏」

    页面跳转的两种方式(转发和重定向)区别及应用场景分析「建议收藏」转发和重定向区别详解作为一名程序员,特别是javaweb开发的程序员,在使用servlet/jsp的时候,我们必须要知道实现页面跳转的两种方式的区别和联系:即转发和重定向的区别。1、RequestDispatcher.forward方法只能将请求转发给同一个WEB应用中的组件;而HttpServletResponse.sendRedirect方法不仅可以重定…

  • 散列冲突

    散列冲突概念:如果当一个元素被插入时与一个已经插入的元素散列到相同的值,那么就会产生冲突,这个冲突需要消除。解决这种冲突的方法有几种:本章介绍两种方法:分离链接法和开放定址法1.分离链接法    其做法就是将散列到同一个值得所有元素保留到一个表中。我们可以使用标准库的实现方法。如果空间很紧(因为表是双向链表的并且浪费空间)。为执行一次查找,我们使用散列函数来确定是那一个链表,然后我们在被确定的链表

发表回复

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

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