Развернуть конечные дивы, чтобы заполнить оставшееся пространство

Question

я следующее:

#subsystemTabs{ 
 
    width: 100%; 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: nowrap; 
 
    flex-flow: center; 
 
} 
 

 
#rightPad, #leftPad{ 
 
    height: 50px; 
 
    margin: auto; 
 
    border: solid; 
 
    flex-grow: 100; 
 
} 
 

 
.subsystemTab{ 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: blue; 
 
    border: solid; 
 
}

<div id="subsystemTabs"> 
 
    <div id="rightPad"></div> 
 
    <div class="subsystemTab"></div> 
 
    <div class="subsystemTab"></div> 
 
    <div class="subsystemTab"></div> 
 
    <div class="subsystemTab"></div> 
 
    <div class="subsystemTab"></div> 
 
    <div class="subsystemTab"></div> 
 
    <div class="subsystemTab"></div> 
 
    <div id="leftPad"></div> 
 
</div>

Я хочу, чтобы два конца коробки #rightPad и #leftPad расширить, чтобы заполнить остальную часть контейнера. Я использовал flex-grow: 100; на двух концах div, и это работает, но я не чувствую, что это правильно, потому что теоретически, если бы страница была массивной, то две концевые divs в конечном итоге перестали расти.

Есть ли лучший способ достичь этого?

Заранее благодарен!

Answer 1

.subsystemTabs:first-child{ 
height: 50px; 
margin: auto; 
border: solid; 
padding-left: 50px; //lets say 
} 
.subsystemTabs:last-child{ 
height: 50px; 
margin: auto; 
border: solid; 
padding-right: 50px; //lets say 
} 

Я не думаю, что это точная подкладка, это просто дать вам представление о том, как вы можете это исправить.

Answer 2

Если вы хотите использовать flex, прекратите пытаться контролировать ширину, это портит цель «гибкого», но если вы должны установить ширину, используйте min/max-width css.

Как вы можете видеть here @ CSSTricks, число flex-grow является отношением. Но с учетом ширины контейнера и неподвижные элементы шириной

#subsystemTabs, #subsystemTabs2, #subsystemTabs3{ 
 
    width: 100%; 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: nowrap; 
 
    flex-flow: center; 
 
} 
 
#subsystemTabs2{ 
 
    width: 80%; 
 
} 
 
#subsystemTabs3{ 
 
    width: 50%; 
 
} 
 

 

 
#rightPad, #leftPad{ 
 
    height: 50px; 
 
    margin: auto; 
 
    border: solid; 
 
    flex-grow: 2; 
 
} 
 

 
.subsystemTab{ 
 
    max-width: 50px; 
 
    min-width:50px; 
 
    height: 50px; 
 
    flex-grow: 1; 
 
    background-color: blue; 
 
    border: solid; 
 
} 
 

 
.subsystemTab2{ 
 
    height: 50px; 
 
    flex-grow: 1; 
 
    background-color: blue; 
 
    border: solid; 
 
}

<div id="subsystemTabs"> 
 
    <div id="rightPad"></div> 
 
    <div class="subsystemTab"></div> 
 
    <div class="subsystemTab"></div> 
 
    <div class="subsystemTab"></div> 
 
    <div class="subsystemTab"></div> 
 
    <div class="subsystemTab"></div> 
 
    <div class="subsystemTab"></div> 
 
    <div class="subsystemTab"></div> 
 
    <div id="leftPad"></div> 
 
</div> 
 

 
<div id="subsystemTabs2"> 
 
    <div id="rightPad"></div> 
 
    <div class="subsystemTab"></div> 
 
    <div class="subsystemTab"></div> 
 
    <div class="subsystemTab"></div> 
 
    <div class="subsystemTab"></div> 
 
    <div class="subsystemTab"></div> 
 
    <div class="subsystemTab"></div> 
 
    <div class="subsystemTab"></div> 
 
    <div id="leftPad"></div> 
 
</div> 
 

 
<div id="subsystemTabs3"> 
 
    <div id="rightPad"></div> 
 
    <div class="subsystemTab2"></div> 
 
    <div class="subsystemTab2"></div> 
 
    <div class="subsystemTab2"></div> 
 
    <div class="subsystemTab2"></div> 
 
    <div class="subsystemTab2"></div> 
 
    <div class="subsystemTab2"></div> 
 
    <div class="subsystemTab2"></div> 
 
    <div id="leftPad"></div> 
 
</div>

Answer 3

Вы можете просто использовать: flex:1; только на контейнерах, которые необходимы, чтобы заполнить пустое пространство слева.

, если вы установили margin:auto; элемент будет сжиматься и центрировать себя, не нужно, и вам не придется устанавливать какой-либо размер.

Вы также можете использовать min-width вместо width о детях.

Если вам нужно установить height, вы можете сделать это на родительском элементе, размер элемента будет равен этому height. min-height также можно использовать. Если это было для демонстрации, вы можете удалить его, самым высоким элементом будет высота всей строки.

#subsystemTabs{ 
 
    width: 100%; 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: nowrap; 
 
    flex-flow: center; 
 
    height: 50px; 
 
} 
 

 
#rightPad, #leftPad{ 
 
    border: solid; 
 
    flex:1; 
 
    background:yellow; 
 
} 
 

 
.subsystemTab{ 
 
    min-width: 50px; 
 
    background-color: blue; 
 
    border: solid black; 
 
    display:flex; 
 
    align-items:center; 
 
    justify-content:center; 
 
    color:white; 
 
}

<div id="subsystemTabs"> 
 
    <div id="rightPad"></div> 
 
    <div class="subsystemTab">sys 1</div> 
 
    <div class="subsystemTab">2</div> 
 
    <div class="subsystemTab">here is the third</div> 
 
    <div class="subsystemTab">and 4</div> 
 
    <div class="subsystemTab">and then 5</div> 
 
    <div class="subsystemTab"> 6 ?</div> 
 
    <div class="subsystemTab">Seven the last !</div> 
 
    <div id="leftPad"></div> 
 
</div>

Answer 4

Я бы это так. сначала удалите flex propreties и фиксированную ширину из подсистемы класса Tab и добавьте ширину procentual для id leftPad, rightPad и подсистемы класса Tab. И использовать box-sizing: border-box;

#subsystemTabs{ 
    width: 100%; 
} 

#rightPad, #leftPad{ 
    height: 50px; 
    margin: auto; 
    width: 15%; 
    border: solid; 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    float:left 
} 

.subsystemTab{ 
    width: 10%; 
    height: 50px; 
    background-color: blue; 
    border: solid; 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    float:left 
}