Question

请告诉我如何使用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

Answer 1

你能尝试添加吗？

.results_table_li span{ margin: 10px; padding: 20px; }

Answer 2

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

Answer 3

我不能100％确定这是否能解答您的问题。听起来你需要一个相等的宽度<span>，无论每个都有什么内容。

一种解决方案是在跨度中添加min-width:{}值。

当然，一旦每个跨度内的内容超出声明的最小宽度，它们将不再是均匀的，但也许出于您的目的，这可以起作用吗？

＆＃13;

ul {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
}

.results_table_li {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  margin: 20px;
}

ul li span {
  border: 1px solid black;
  min-width: 50px;
  display: flex;
  justify-content: center;
}

＆＃13;

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

＆＃13;

如何使用flex模型给出相等的宽度范围？

3 个答案: