it-swarm.com.ru

Установка максимальной ширины для гибких элементов?

Я пытаюсь создать раздел фильтра на моем сайте, все содержимое генерируется динамически (поэтому я не могу добавить к нему дополнительных родителей), и наш гид по стилю создает их, используя элементы flex. Я хотел бы сохранить эту функциональность по большей части.

Я хочу, чтобы мои 3 flex-элемента имели max-width и плавали влево, оставляя мой не flex-элемент плавающим вправо, в общем контейнере, для которого установлена ​​максимальная ширина 1080px, примерно так:

Option 1    Option 2    Option 3                                    Non-flex Item

Я попытался установить значения flex-align и следовать этот ответ , но, похоже, это не сработает.

На данный момент, это код, с которым я работаю:

HTML

<ul class="container">
  <li class="child">One</li>
  <li class="child">Three</li>
  <li class="child">Three</li>
  <div class="non-flex">
   I'm not a flex item
  </div>
</ul>

CSS 

.container{
      display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        position: relative;
            max-width: 1080px;
        margin: 0 auto;
        padding: 0 20px;
        box-sizing: content-box;
    }

    .child{
          display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        position: relative;
    }

Я также сделал Fiddle для вас всех, чтобы поиграть.

4
knocked loose

Я бы применил width или min-width к элементам .child (или к левому/правому отступу, который создает расстояние между ними) и margin-left: auto к последнему элементу, который перемещает его вправо, независимо от других:

https://jsfiddle.net/6vwny6bz/2/

.container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: content-box;
}

.child {
  list-style: none;
  min-width: 80px;
  padding: 10px 0;
}

.non-flex {
  margin-left: auto;
  padding: 10px 0;
}
<ul class="container">
  <li class="child">One</li>
  <li class="child">Three</li>
  <li class="child">Three</li>
  <div class="non-flex">
    I'm not a flex item
  </div>
</ul>

4
Johannes

Добавление гибкого промежутка между объектами списка очень помогает. https://jsfiddle.net/cd9car5k/1/

Так

<ul class="container">
  <li class="child">One</li>
  <li class="child">Three</li>
  <li class="child">Three</li>
  <span class="example-spacer"></span>
  <div class="non-flex">
   I'm not a flex item
  </div>
</ul>

где:

.example-spacer {
    flex: 1 1 auto;
  }
0
mahval

Вы можете использовать:

.non-flex{
  margin-left: 50%;
}

создать больше пространства между первыми 3 элементами и негибким

0
icj90