Верстка flex-box или как?

490

02 января 2018, 14:13

Вертикальные направляющие это границы контейнера (.container с max-width: 1200px).

Суть задачи в том, чтобы в .container с фикс. шириной, запихнуть два блока, один с фикс. шириной, другой заполняющий остальную часть.

Края этих блоков должны быть на 100% (т.е. прижаты к краю браузера).

Но самое главное что эти блоки, которые в контейнере, для них должна быть возможность размещения контента, чтобы не выходили за пределы контейнера.

Answer 1

В общем, три самых распространённых варианта

Решение с использованием overflow и float

body {margin: 0;} 
 
.container { 
  width: 100%; 
  height: 52px; 
  background-color: yellow; 
} 
 
.Block-0 { 
  width: 100px; 
  height: 100%; 
  background-color: red; 
  float: left; /* ! */ 
} 
.Block-1 { 
  width: auto; 
  height: 100%; 
  background-color: blue; 
  overflow: auto; /* ! */ 
}

<div class="container"> 
  <div class="Block-0"></div> 
  <div class="Block-1"></div> 
</div>

Решение с использованием flexbox

body {margin: 0;} 
 
.container { 
  display: flex; /* ! */ 
  width: 100%; 
  height: 52px; 
  background-color: yellow; 
} 
 
.Block-0 { 
  width: 100px; 
  background-color: red; 
} 
.Block-1 { 
  flex-grow: 1; /* ! */ 
  background-color: blue; 
  overflow: auto; 
}

<div class="container"> 
  <div class="Block-0"></div> 
  <div class="Block-1"></div> 
</div>

Решение с использованием table

body {margin: 0;} 
 
.container { 
  display: table; /* ! */ 
  width: 100%; 
  height: 52px; 
  background-color: yellow; 
} 
 
.Block-0 { 
  display: table-cell; /* ! */ 
  width: 100px; 
  background-color: red; 
} 
.Block-1 { 
  display: table-cell; /* ! */ 
  background-color: blue; 
  overflow: auto; 
}

<div class="container"> 
  <div class="Block-0"></div> 
  <div class="Block-1"></div> 
</div>

Answer 2

если правильно понял:

body { 
  margin: 0; 
} 
.hero { 
  height: 300px; 
  background: #fff; 
} 
.container { 
  max-width: 500px; 
  margin-left: auto; 
  margin-right: auto; 
  border-right: 1px solid black; 
  border-left: 1px solid black; 
   
} 
.hero__inner { 
  display: flex; 
  color: #000; 
} 
.logo { 
  width: 100px; 
  height: 30px; 
  background-color: rgba(255,0,0,.5); 
  margin-left: calc((100% - 100vw) / 2); 
  padding-left: calc((100vw - 100%) / 2); 
   
} 
.hero__content { 
  flex: 1; 
  background-color: rgba(0,255,0,.5); 
  margin-right: calc((100% - 100vw) / 2); 
  padding-right: calc((100vw - 100%) / 2); 
}

<div class="hero"> 
  <div class="container"> 
    <div class="hero__inner"> 
      <div class="logo">logo</div> 
      <div class="hero__content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum alias dicta doloremque temporibus laudantium at suscipit facilis esse deserunt, quam amet perspiciatis obcaecati optio. Quasi amet tempora culpa qui, neque veniam impedit animi nam distinctio.</div> 
    </div> 
   </div> 
</div>

Answer 3

Пример

html, 
body { 
  overflow-x: hidden; 
} 
 
.topbar { 
  background: #7366FE; 
} 
 
.topbar .container, 
.topbar [class*=col-] { 
  padding-left: 0; 
  padding-right: 0; 
} 
 
.topbar .row { 
  margin-left: 0; 
  margin-right: 0; 
} 
 
.topbar__logo { 
  display: block;   
  padding: 5px; 
  color: #fff;   
  text-align: center; 
} 
 
.topbar__line { 
  text-align: right; 
  padding: 5px; 
  position: relative; 
} 
 
.topbar__line:after { 
  content: ''; 
  position: absolute; 
  left: 100%; 
  top: 0; 
  width: 100%; 
  height: 100%; 
} 
 
.topbar__line, 
.topbar__line:after { 
  background: #F2F2F2; 
} 
 
.topbar__line--2, 
.topbar__line--2:after { 
  background: #CC293A; 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
<div class="topbar"> 
  <div class="container"> 
    <div class="row"> 
      <div class="col-xs-3"> 
        <a href="#" class="topbar__logo">LOGO</a> 
      </div> 
      <div class="col-xs-9"> 
        <div class="topbar__line">line 1</div> 
        <div class="topbar__line topbar__line--2">line 2</div> 
      </div> 
    </div> 
  </div> 
</div>