flexbox и указанная ширина - PullRequest
0 голосов
/ 16 мая 2018

Я пытаюсь получить контейнер, в котором каждый элемент имеет одинаковый размер, за исключением случая, когда к элементу добавлен класс, который определяет размер. В этом случае элемент принимает ширину добавленного класса, а другой элемент делит равным образом левое пространство. Я создаю авто класс, который используется всеми предметами. flex-grow: 1; которые позволяют элементу сгибаться-сжиматься: 1; Все для уменьшения и гибкой основы: авто; to дает всем элементам одинаковый размер, но когда я добавил небольшой класс с шириной 5%, он не работал

.flex-container {
  background-color: #F4F7F8;
  resize: horizontal;
  overflow: hidden;
  display: flex;
  margin: 1em;
}

.auto {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
  border: 5px solid black;
}

.small {
  width: 5% !important;
}
<div class="flex-container">
  <div class="item auto small">small</div>
  <div class="item auto">auto</div>
  <div class="item auto">auto</div>
</div>

Ответы [ 2 ]

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

Вам нужно сбросить flex-grow для этого класса:

.flex-container {
  background-color: #F4F7F8;
  resize: horizontal;
  overflow: hidden;
  display: flex;
  margin: 1em;
}

.auto {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
  border: 5px solid black;
}

.small {
  flex-grow: 0;
  width: 5%;
}
<div class="flex-container">

  <div class="item auto small">small</div>
  <div class="item auto">auto</div>
  <div class="item auto">auto</div>

</div>
0 голосов
/ 16 мая 2018

просто установить max-width в .small классе.

.flex-container {
    background-color: #F4F7F8;
    resize: horizontal;
    overflow: hidden;
    display: flex;
    margin: 1em;
}
.auto {
    
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: auto;
         border: 5px solid black;
}


/*or set with flex basis*/

.small {
  flex: 0 0 50%;  
  max-width: 50%;  
}

.without-max {
  flex: 0 0 50%;  
}
<div class="flex-container">

   <div class="item auto small">small</div>
   <div class="item auto">auto</div>
   <div class="item auto">auto</div>

</div>


<div class="flex-container">

   <div class="item auto without-max">smallsmallsmallsmallsmallsmallsmallsmallsmallsmallsmallsmallsmallsmallsmallsmallsmallsmallsmallsmallsmall</div>
   <div class="item auto">auto</div>
   <div class="item auto">auto</div>

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