flex布局：部分项固定，部分项自适应

最新推荐文章于 2023-03-15 10:52:23 发布

weixin_34099526

最新推荐文章于 2023-03-15 10:52:23 发布

阅读量270

点赞数

文章标签： python

原文链接：https://my.oschina.net/u/3407699/blog/1924713

版权

2019独角兽企业重金招聘Python工程师标准>>>

留下的疑问：这种布局中的文字如何垂直居中，高度未知，而且是flex布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
  *{
    margin: 0;
    padding: 0;
  }
  .wrapper{
    display: flex;
    width: 1000px;
    height: 300px;
  }
  .item{
    flex:1;
    border: 1px solid red;
    text-align: center;
  }
  .item.percent15{
    flex:0 0 15%;
  }
</style>
<body>
<div class="wrapper">
  <div class="item percent15">
    百分15
  </div>
  <div class="item">
    自适应
  </div>
  <div class="item">
    自适应
  </div>
  <div class="item percent15">
    百分15
  </div>
</div>
</body>
</html>

转载于:https://my.oschina.net/u/3407699/blog/1924713