гибкое пространство между элементами - PullRequest
Новая
       6

гибкое пространство между элементами

0 голосов
/ 27 июня 2018

У меня есть два элемента flex, и мне нужно пространство между ними, Я добавил отступ справа от них, и он выглядит великолепно, но проблема в том, что когда экран становится наименьшим, второй элемент перемещается вниз на новую строку, и у меня появляется избыточное поле справа: 30 пикселей, и это не выглядит хорошо. Как я могу решить это: enter image description here

enter image description here

Я не хочу использовать событие изменения размера окна, потому что если вы откроете этот интерфейс в мобильном телефоне, то в начале у вас будут эти два элемента в отдельных строках. 

.item-target-scale {
        flex: 3;
        min-width: 186px;
        display: inline-block;
        text-align: left;
        margin-right: 30px;
      }

      .item-target-bar {
        flex:1;
        min-width: 100px;
        display: inline-block;
      }

Ответы [ 2 ]

0 голосов
/ 27 июня 2018

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

    @media screen and (min-width:'calculated'px)
    {
        .item-target-scale {
        margin-right: 0px;
    }
}

Надеюсь, это то, что вам нужно.

EDIT:

Используйте это, если размер элемента не фиксирован: 

function myFunction(){
var i=document.getElementById("target1").offsetWidth+document.getElementById("target2").offsetWidth+50;
var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
if(i>=w)
{
	document.getElementById("target1").style.marginRight="0px";
}
else
{
	document.getElementById("target1").style.marginRight="30px";
}
}
.item-target-scale {
        flex: 3;
        min-width: 186px;
        display: inline-block;
        text-align: left;
        margin-right: 30px;
        background:green;
      }

      .item-target-bar {
        flex:1;
        min-width: 100px;
        display: inline-block;
        background:red;
      }
<body onresize="myFunction()" onload="myFunction()">

<div class="item-target-scale" id="target1">
dwdwdwdwd
</div>
<div class="item-target-bar" id="target2">
eegerg
</div>

</body>

Мне понадобится код HTML, чтобы получить остальную часть размера элемента, но это можно сделать путем проверки. Итак, просто добавьте ширину оставшегося элемента в «i».

0 голосов
/ 27 июня 2018

Я бы предложил обернуть эти два элемента в родительский элемент и использовать свойство justify-content: space-between. 

.parent {
  display: flex;
  justify-content: space-between;
  width: 50%;
}

.child {
  height: 20px;
  width: 50px;
  background: red;
}
<div class="parent">
  <div class="child child1">
  </div>
  <div class="child child2">
  </div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...