flex佈局：部分項固定，部分項自適應

時間 2019-11-18

標籤 flex 佈局分項固定自適應欄目 Flex 简体版

原文原文鏈接

留下的疑問：這種佈局中的文字如何垂直居中，高度未知，並且是flex佈局html

<!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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。