flex弹性布局例子

最新推荐文章于 2022-04-27 18:46:38 发布

weixin_30421809

最新推荐文章于 2022-04-27 18:46:38 发布

阅读量105

点赞数

原文链接：http://www.cnblogs.com/beimingbingpo/p/8630164.html

版权

<style>
ul{
  display: flex;
   width:300px;     
}
li{
  flex: 1;
  text-align: center;
  line-height: 100px;
}
ul li{
    list-style:none;
    background:#6bc3e6;
    border-right:1px solid #fff;
    color:#fff;
}
body,p{margin:0;}
</style>
<body>
    
    <ul>
     <li>音乐</li>
     <li>影视</li>
     <li>旅游</li>
     <li>猪头</li>
    </ul>
</body>

flex垂直居中例子：

<style>
.demo{
  width: 500px;
  height: 300px;
  border: 1px solid purple;
  display: flex;                /*设置为flex布局*/
  justify-content: center;   /*水平居中*/
  align-items: center;     /*垂直居中*/

}
.inner{
  width: 160px;
  height: 160px;
  font-size: 26px;
  border: 1px solid red;
}
body,p{margin:0;}
</style>
<body>
    <div class="demo">
      <div class="inner">
        <p>这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试</p>
      </div>
    </div>
</body>

display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
justify-content:center;
-webkit-justify-content:center;

转载于:https://www.cnblogs.com/beimingbingpo/p/8630164.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_30421809

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
flex弹性布局例子

<style>ul{ display: flex; width:300px; }li{ flex: 1; text-align: center; line-height: 100px;}ul li{ list-style:none; background:#6bc3e6; border-rig...
复制链接

扫一扫