<link href='https://fonts.googleapis.com/css?family=Fira+Sans' rel='stylesheet' type='text/css'>
<p>Цей приклад показує як працює властивість <code>flex-basis</code>. Змінюйте значення для властивості нижче, щоб змінити відображення виділеного нащадка в контейнері нижче.</p>
<hr>
<strong>flex-basis: </strong>
<input type="number" class="input" id="basis" value="100" step="10">px
<strong>;</strong><br><br>
<hr>
<div class="box">
<div class="child one">flex-basis: 100px;</div>
<div class="child hl">flex-basis: 100px;</div>
<div class="child two">flex-basis: 100px;</div>
</div>* {
box-sizing: border-box;
padding: 0;
}
body {
font-family: 'Fira Sans', sans-serif;
}
.child {
padding: 50px 8px 8px 8px;
background-color: gold;
font-size: 80%;
transition: flex .15s ease-in 0s;
border-left: 4px solid #dcdcdc;
font-family: monospace;
text-align: center;
}
.child:first-child {
border-left: 0;
}
.child.one {
flex-basis: 100px;
}
.child.hl {
flex-basis: 100px;
background-color: #F74C32;
}
.child.two {
flex-basis: 100px;
}
message {
display: none;
}
.wm {
min-height: 100px;
}
.box {
width: 100%;
height: 150px;
background-color: #dcdcdc;
padding: 16px;
display: flex;
}
hr {
margin-bottom: 16px;
}$('.input').on('change', function() {
var basis = $('#basis').val();
$('.child.hl').css( 'flex-basis', basis + 'px' );
$('.child.hl').html( 'flex-basis: ' + basis + 'px;' );
});
External CSS
This Pen doesn't use any external CSS resources.