CSS flex-grow — як флекс-елемент займає вільне місце

HTML

<div class="row">
    <div>1</div>
    <div>3 — утричі ширший</div>
    <div>1</div>
</div>

CSS

.row {
    display: flex;
}

.row div {
    padding: 8px;
    border: 1px solid #0172ad;
}

.row div:nth-of-type(1) { flex-grow: 1; }
.row div:nth-of-type(2) { flex-grow: 3; }
.row div:nth-of-type(3) { flex-grow: 1; }

HTML

<figure>
    <div class="row a"><span>1</span><span>2</span><span>3</span></div>
    <figcaption>width: 100px + flex-grow: 1 / 2 / 3</figcaption>
</figure>

<figure>
    <div class="row b"><span>1</span><span>2</span><span>3</span></div>
    <figcaption>flex: 1 / 2 / 3</figcaption>
</figure>

CSS

figure {
    display: block;
    margin: 0 0 16px;
    font: 12px monospace;
}

.row {
    display: flex;
    width: 400px;
    border: 2px solid #0172ad;
}

.row span {
    padding: 10px 0;
    background: #0172ad;
    color: #fff;
    text-align: center;
    border-right: 1px solid #fff;
}

.a span {
    width: 100px;
}

.a span:nth-child(1) { flex-grow: 1; }
.a span:nth-child(2) { flex-grow: 2; }
.a span:nth-child(3) { flex-grow: 3; }

.b span:nth-child(1) { flex: 1; }
.b span:nth-child(2) { flex: 2; }
.b span:nth-child(3) { flex: 3; }

HTML

<p>Вибери потрібне значення для <code>flex-grow</code> (для лівої навігації):</p>

<input type="number" min="0" value="2" id="field"></input>

<p id="text"></p>

<hr>

<div class="layout">
  <header>
    <h4>Simple website</h4>
  </header>
  <main>
    <nav id="nav">
      <pre><code>flex-grow: <strong id="newval">2</strong>;</code></pre>
    </nav>
    <section id="wrapper">
      <pre><code>flex-grow: 2;</code>
    </section>
  </main>
  <footer>
    &copy; 2017
  </footer>
</div>

CSS

* {
  box-sizing: border-box;
  padding: 0;
}

body {
  text-align: center;
  font-family: monospace;
  font-size: 17px;
  line-height: 1.5;
  color: #222;
}

#field {
  padding: 8px 16px;
  font-size: 19px;
}

header {
  line-height: 75px;
  text-align: center;
  text-transform: uppercase;
  background-color: #808080;
  color: #f9f9f9;
}

main {
  display: flex;
}

nav {
  flex-grow: 2;
  background-color: yellow;
}

#wrapper {
  flex-grow: 2;
  background-color: #eee;
}

footer {
  line-height: 50px;
  background-color: #000;
  color: #f1f1f1;
  margin-top: 16px;
}

JS

var nav = document.getElementById('nav');
var newval = document.getElementById('newval');

document.getElementById('field').onchange = function () {
  nav.style.flexGrow = this.value;
  newval.innerHTML = this.value;
};
//# sourceURL=pen.js

HTML

<div class="wrapper">

  <div class="gold"><code>flex-grow: <strong>1</strong>;</code></div>
  <div class="red"><code>flex-grow: <strong>10</strong>;</code></div>
  <div class="blue"><code>flex-grow: <strong>3</strong>;</code></div>

</div>

CSS

* {
  box-sizing: border-box;
}

.wrapper {
  font-family: monospace;
  color: #fff;
  border: 2px solid #ddd;
  display: flex;
  height: 250px;
} 

.wrapper > div {
  padding: 56px 0;
  font-weight: 700;
  font-size: 1em;
  text-align: center;
}

.gold {
  background-color: gold;
  flex-grow: 1;
}

.red {
  background-color: red;
  flex-grow: 10;
}

.blue {
  background-color: steelblue;
  flex-grow: 3;
}

HTML

<div class="info">
	<p>За допомогою властивості <code>flex-grow</code> ми можемо визначити коефіціент збільшення гнучкого елемента, по відношенню до інших гнучких елементів, всередині того ж контейнера, якщо всередині нього залишається вільний простір.</p>
	<p>Нижче, на кожному елементі написаний його коефіціент, щоб Ви побачили різницю.</p>
</div>

<ul class="wrapper">
	<li class="one">1</li>
	<li class="two">2</li>
	<li class="three">3</li>
	<li class="four">4</li>
</ul>

CSS

* {
	box-sizing: border-box;
}

body {
	font-family: monospace;
	font-size: 15px;
	line-height: 1.45;
}

.info {
	padding: 6px;
}

code {
	font-weight: 700;
	color: #444;
	border-bottom: 2px solid #666;
}

.wrapper {
	display: flex;
	justify-content: space-around;
	list-style: none;
  padding: 0;
  margin: 0;
  background-color: #dcdcdc;
  height: 75px;
}

.wrapper li {
	text-align: center;
	background-color: gold;
	margin-left: 4px;
	width: 30px;
	height: 75px;
  line-height: 79px;
  font-weight: 700;
}

.wrapper li:first-child {
	margin-left: 0;
}

.wrapper li.one {
	flex-grow: 1;
}

.wrapper li.two {
	flex-grow: 2;
}

.wrapper li.three {
	flex-grow: 3;
}

.wrapper li.four {
	flex-grow: 4;
}