Flutuar itens

[Biel. 9]

Olá pessoal. ao selecionar sim, os itens ficam um abaixo do outro. Como fazer os itens flutuar quando item sim for selecionado? 

<style>
	#divPai{
		display: flex; 
		flex-wrap: wrap; 
		align-items: center; 
		border: 1px solid red;
		padding: 6px;
	}
	.item1,
	.item2,
	.item3,
	.item4,
	.item5,
	.item6{ flex:1; max-width: 90px;  border: 1px solid green; margin-right: 10px; }

</style>


<div style="width:100%;">
<b>Quer mostrar?</b>
<select id="itemSelecionado" required onchange="funcAprendiz();" >
<option value=""></option>
<option value="Sim" style="font-size:18px;">Sim</option>
<option value="Não" style="font-size:18px;">não</option>
</select>
</div>

<div id="divPai">
<div class="item1">item1</div>
<div class="item2">item2</div>
<div class="item3">item3</div>
<div class="item4">item4</div>
<div class="item5">item5</div>
<div class="item6">item6</div>
</div>

<script>

document.getElementById("divPai").style.display='none';

function funcAprendiz(){

var itemSelecionado  = document.getElementById("itemSelecionado");
  
if(itemSelecionado.value == "Sim"){
document.getElementById("divPai").style.display='block';
}  
  
else if(itemSelecionado.value == "Não"){
	document.getElementById("divPai").style.display='none';
} 
else if(itemSelecionado.value == ""){
document.getElementById("divPai").style.display='none';
} 

}

</script>

 

[wanderval 19]

Seu problema está no javascript quando está adicionando style.display='block', "block" irá tornar os elementos em coluna neste caso poderia ser "inline-block" ou "inline-flex"

JS:

// Problema
if(itemSelecionado.value == "Sim"){
   document.getElementById("divPai").style.display='block';
}

// Solução
if(itemSelecionado.value == "Sim"){
   document.getElementById("divPai").style.display='inline-flex';
}

Alteração de código

HTML - alterado nome da classe para reaproveitamento

<!--Removido methodo de invocação onchange passado para o script-->
<select id="itemSelecionado" required>
  <option value=""></option>
  <option value="Sim" style="font-size:18px;">Sim</option>
  <option value="Não" style="font-size:18px;">não</option>
</select>

<!--Alterado nome das classes para reaproveitamento-->
<div id="divPai">
  <div class="item">item1</div>
  <div class="item">item2</div>
  <div class="item">item3</div>
  <div class="item">item4</div>
  <div class="item">item5</div>
  <div class="item">item6</div>
</div>

CSS:

#divPai {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 12px;
  border: 1px solid red;
  padding: 6px;
  align-items: center;
}

#divPai .item { 
  max-width: 90px;
  border: 1px solid green;
}

JS:

document.getElementById("divPai").style.display='none';

// Substituido if/else por condicional ternário
function funcAprendiz(){
  var itemSelecionado = document.getElementById("itemSelecionado");
  var elementStyle = document.getElementById("divPai").style;
  
  elementStyle.display = itemSelecionado.value == "Sim"
     ? 'inline-flex'
     : 'none';
}

// Listener
document.getElementById('itemSelecionado').addEventListener('change', funcAprendiz);

 

JsBin: https://jsbin.com/geyeqahuqi/edit?html,css,js,output