flex垂直居中,水平居中和其他布局方式

flex垂直居中,水平居中和其他布局方式flex水平垂直居中<divclass=”content”><divclass=”item”>1</div><divclass=”item”>2</div><divclass=”item”>3</div></div>.content{display:flex;align-items:center;justify-content:center;bord

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

flex水平垂直居中

<div class="content"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div> .content { 
   
   display: flex;
   align-items:center;
   justify-content:center;
   border: 1px solid #0000FF;
   height: 100px;
   width: 500px; // 下面的代码可以让不同宽高的图片在固定宽高的容器里面正常比例显示, 并且水平, 垂直居中 > img { 
   
   		max-width: 100%;
   		max-height: 100%;
   }
 }
 .item { 
   
   width: 60px;
   height: 40px;
   border: 1px solid red;
 }

参考文章: https://zhuanlan.zhihu.com/p/84289727

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

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/132066.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • MySQL官网下载教程

    MySQL官网下载教程在百度搜索输入:MySQL,然后选择官方网站,点击进入进入MySQL官网之后,首先点击:DOWNLOADS,待页面刷新之后,再点击:Community,点击:MySQLCommunityServer,最后点击Archivedversions,选择历史版本选择MySQLInstaller选择需要下载的版本最后点击Download进行下载…

    2022年5月3日
    44
  • com.onseven.dbvis.DbVisualizerGUI

    com.onseven.dbvis.DbVisualizerGUIcom.onseven.dbvis.DbVisualizerGUI

    2022年4月23日
    351
  • Flow Control(流控)

    Flow Control(流控)Backpressure(背压)只是解决FlowControl的其中一个方案。就像小学做的那道数学题:一个水池,有一个进水管和一个出水管。如果进水管水流更大,过一段时间水池就会满(溢出)。这就是没有FlowControl导致的结果。而解决FlowControl有几种思路呢?(1)Backpressure,就是消费者需要多少,生产者就生产多少。这有点类似于TCP里的流量控制,接收方根据自己的…

    2022年6月6日
    27
  • Python 使用sqlalchemy操作MYSQL

    Python 使用sqlalchemy操作MYSQL

    2022年4月3日
    36
  • python多线程的几种方法

    python多线程的几种方法python多线程编程Python多线程编程中常用方法:1、join()方法:如果一个线程或者在函数执行的过程中调用另一个线程,并且希望待其完成操作后才能执行,那么在调用线程的时就可以使用被调线程

    2022年7月3日
    26
  • origin中文版刻度线消失_2019xb

    origin中文版刻度线消失_2019xbOrigin2019b64Bit版本本身就有很多的Bug,很多人装上了该版本之后又不想卸载重装,因为这个过程挺麻烦的,本文的解决办法就是在电脑已有Origin2019b64Bit的情况下安装Origin2019b的32Bit版本。

    2022年9月2日
    3

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

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