как дать равный промежуток ширины, используя гибкую модель? - PullRequest
Новая
       5

как дать равный промежуток ширины, используя гибкую модель?

0 голосов
/ 09 мая 2018

Подскажите, пожалуйста, как получить одинаковый диапазон ширины при использовании гибкой модели?

вот мой код 

<!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 width всем span элементам, которые являются потомками li. Я использую display:flex. Я также пытаюсь flex:1

код ссылки https://jsbin.com/huzeqedola/edit?html,css,output

Ответы [ 3 ]

0 голосов
/ 09 мая 2018 
<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
}
0 голосов
/ 09 мая 2018

Я не уверен на 100%, ответит ли это на ваш вопрос. Похоже, вам нужна одинаковая ширина <span> независимо от содержания в каждом.

Одним из решений будет добавление значения min-width:{} к диапазонам.

Конечно, как только содержимое внутри каждого промежутка выходит за заявленную минимальную ширину, оно больше не будет равномерным, но, возможно, для ваших целей это может сработать? 

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;
}
<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>
0 голосов
/ 09 мая 2018

Можете ли вы попробовать добавить это?

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...