Резиновая шапка с помощью flexbox

235

14 марта 2017, 12:25

Нужно сделать шапку, чтобы при любом разрешении экрана расстояние между элементами было одинаковым.
Я решил делать с помощью flex (Может есть варианты лучше?)
Имею такой код:

/* header */ 
 
.b-header { 
  height: 230px; 
  position: relative; 
  background: asset-url("x1.png", images) repeat-x; 
  z-index: 101; 
} 
 
.flex { 
  display: flex; 
  flex-direction: row; 
  justify-content: space-around; 
  align-items: center; 
} 
 
.b-logo { 
  left: 130px; 
  top: 6px; 
  position: absolute; 
} 
 
.b-second-logo { 
  left: 280px; 
  top: 3px; 
  position: absolute; 
} 
 
.b-logo-text { 
  left: 24px; 
  top: 35px; 
  position: absolute; 
  color: #000; 
} 
 
.b-logo-text strong { 
  font-size: 25px; 
} 
 
.b-logo-secondary-text { 
  text-align: center; 
  font-size: 15px; 
} 
 
.b-org-name { 
  color: #fff; 
  left: 26%; 
  top: 2px; 
  position: absolute; 
  text-align: center; 
  width: 300px; 
  font-size: 14px; 
  line-height: 14px; 
} 
 
.b-org-name strong { 
  display: block; 
  font-weight: 400; 
  font-size: 29px; 
  line-height: 33px; 
  text-transform: uppercase; 
} 
 
.b-org-info { 
  right: 32.8%; 
  top: 9px; 
  position: absolute; 
  text-align: center; 
  padding: 17px 0 0 0; 
  font-size: 14px; 
  line-height: 14px; 
  background: asset-url("clock.png", images) 15px 67px no-repeat; 
  //background-size: 10px 10px; 
} 
 
.b-org-info__address { 
  display: block; 
  padding-bottom: 3px; 
} 
 
.b-org-info__hint { 
  color: #ffff00; 
  font-size: 15px; 
  position: absolute; 
  white-space: nowrap; 
  top: 0px; 
  left: 71px; 
}

<header class="b-header flex"> 
  <a href="" class="b-second-logo"></a> 
  <a href="" class="b-logo"></a> 
 
  <div class="b-logo-text"> 
    <strong> Заголовок </strong> 
    <div class="b-logo-secondary-text"> 
      Заголовок 2 
    </div> 
  </div> 
 
  <div class="b-org-info"> 
    <div class="b-org-info__hint"> </div> 
    <div class="b-org-info__address"> 
      Адрес 
    </div> 
  </div> 
</header>

Я так понимаю, чтобы шапка стала резиновая мне нужно присвоить ей класс .flex. Но ничего не меняется. Но когда я прописываю правила из класса .flex в класс .b-org-info, тогда один этот блок становится резиновым. В общем-то получается то поведение, которое мне нужно (немного криво элементы ставятся, но пока не об этом).

Как организовать код? и почему не срабатывает код, когда я всей шапке присваиваю класс .flex?

Answer 1

.b-header { border:1px solid hsla(0,0%,0%,1); 
  height: 230px; 
  position: relative; 
  background: asset-url("x1.png", images) repeat-x; 
  z-index: 101; 
  text-align:center; 
  text-shadow:0px 0px 1px hsla(0,0%,20%,6); 
} 
 
.flex { 
  display: flex; 
  flex-direction: row; 
  align-items: center; 
} 
 
.b-logo { border:1px solid hsla(0,80%,50%,1); 
	line-height:2; 
	flex:1 1 10%; 
} 
 
.b-second-logo  
{  
	border:1px solid hsla(0,80%,50%,1); 
	line-height:2; 
  flex:1 1 10%; 
} 
 
.b-logo-text  
{  
	height:2em; 
 	border:1px solid hsla(240,80%,50%,1); 
  color: #000; 
  flex:1 1 29%; 
} 
 
.b-logo-text strong 
{ 
 display:block; 
 float:left; 
 width:calc(49%); 
 font-size: 15px; 
  
} 
 
.b-logo-secondary-text  
{ 
  text-align: center; 
  font-size: 10px; 
  line-height:1.8; 
} 
 
.b-org-info  
{  
	height:2em; 
	border:1px solid hsla(90,80%,50%,1); 
  font:normal 100%/1 sans-serif; 
  color:hsla(0,0%,0%,1); 
  flex:1 1 29%; 
} 
 
.b-org-info__address { 
 	float:left; 
  display: block; 
  width:calc(25%); 
  text-align:right; 
	line-height:2; 
} 
 
.b-org-info__hint {  
	float:right; 
  width:calc(70%); 
  color: #ffff00; 
  text-align:left; 
	line-height:2; 
}

<header class="b-header flex"> 
				<a href="" class="b-second-logo">ссылка_1</a> 
				<a href="" class="b-logo">ссылка_2</a> 
 
				<div class="b-logo-text"> 
				<strong> Заголовок </strong> 
				<div class="b-logo-secondary-text">Заголовок 2</div> 
				</div> 
 
				<div class="b-org-info"> 
					<div class="b-org-info__address">Адрес : </div> 
					<div class="b-org-info__hint">Пушкина 15</div> 
				</div> 
</header>