时间戳

首页 > 解决方案 > 如何使用 flex 模型给出相等的宽度跨度？

html - 如何使用 flex 模型给出相等的宽度跨度？

问题描述

你能告诉我如何使用 flex 模型给出相等的宽度跨度吗？

这是我的代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div>
  <ul class="">
    <li class="results_table_li flex_one">
      <span >1</span><span>2</span><span>4</span><span>5</span><span>55</span>
    </li>
    <li>
        <span >8</span><span>0</span><span>8</span><span>44</span><span>56</span>

    </li>
  </ul>
</div>

</body>
</html>

CSS

  body{
      margin:0;
      padding:0;
    }
    ul {
      list-style:none
    }

    .results_table_ul {
      display: flex;
    }

    .results_table_li {
      display: flex;

    }

    .flex_one {
      flex: 1;
    }

124555 会变得平等width，你能告诉我我将如何给equal所有元素的宽度， span这是li我正在使用的所有元素。display:flex我也尝试flex:1

代码链接 https://jsbin.com/huzeqedola/edit?html,css,output

标签： htmlcssflexbox

解决方案

<div>
      <ul>
        <li class="results_table_li flex_one">
          <span >1</span>
          <span>2</span>
          <span>4</span>
          <span>5</span>
          <span>55</span>
        </li>
        <li class="results_table_li flex_one">
            <span >8</span>
            <span>0</span>
            <span>8</span>
            <span>44</span>
            <span>56</span>
        </li>
      </ul>
    </div>

CSS

 ul {
  list-style:none
}

.results_table_ul {
  display: flex;
  flex-direction: column;

}

.results_table_li {
  display: flex;
  flex-direction: row;
}

.flex_one {
  flex: 1;
}
ul li span {
  display: flex;
    flex: 1 0 auto
}

推荐阅读