Гибкое пространство между элементами
У меня есть два гибких элемента, и мне нужно пространство между ними,
Я добавил правое поле между ними, и это выглядит великолепно, но проблема в том, что когда экран становится самым маленьким, второй элемент опускается до новой строки, а у меня избыточное поле вправо: 30 пикселей, и это выглядит не очень хорошо.
Как я могу это решить:
Я не хочу использовать событие изменения размера окна, потому что если вы откроете этот пользовательский интерфейс на мобильном устройстве, то вначале у вас будут эти два элемента в отдельных строках.
.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
Я бы предложил обернуть эти два элемента в родительский элемент и использовать свойство 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>Для этого используйте медиа-запрос. Осмотрите свою страницу и узнайте, когда происходит разрыв строки (используйте инструменты разработчика, он дает точную ширину области просмотра в пикселях).
@media screen and (min-width:'calculated'px)
{
.item-target-scale {
margin-right: 0px;
}
}
Надеюсь, это то, что вам нужно.
Обновлено:
Используйте это, если размер элемента не фиксирован:
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.
Как насчет того, чтобы меньше всего становился элемент, а не окно, измените размер элемента ... медиа-запрос здесь не будет работать
Как бы вы изменили размер изображения? Непосредственно в коде или его можно растянуть на веб-странице? Вы дали ему минимальную ширину 186 пикселей, поэтому я предполагаю, что изменение размера изображения будет происходить с помощью кода ...
@OrtalBlumenfeldLagziel Скажите, пожалуйста, это то, что вам нужно.
Рад помочь :) Примите его, если это кажется правильным решением вашей проблемы.