<html>
<head>
<title>CSS flex</title>
</head>
<body>
<div class="page">
<div class="example-item">
<p class="example-item__text">Пример использования свойства <code>flex</code> со значением <code>initial</code>:</p>
<div class="example-item__content example-item__content--0">
<div class="example-item__block"></div>
<div class="example-item__block"></div>
<div class="example-item__block"></div>
<div class="example-item__block"></div>
<div class="example-item__block"></div>
<div class="example-item__block"></div>
<div class="example-item__block"></div>
<div class="example-item__block"></div>
<div class="example-item__block"></div>
<div class="example-item__block"></div>
</div>
</div>
<div class="example-item">
<p class="example-item__text">Пример использования свойства <code>flex</code> со значением <code>none</code>:</p>
<div class="example-item__content example-item__content--1">
<div class="example-item__block"></div>
<div class="example-item__block"></div>
<div class="example-item__block"></div>
<div class="example-item__block"></div>
<div class="example-item__block"></div>
<div class="example-item__block"></div>
<div class="example-item__block"></div>
<div class="example-item__block"></div>
<div class="example-item__block"></div>
<div class="example-item__block"></div>
</div>
</div>
<div class="example-item">
<p class="example-item__text">Пример использования свойства <code>flex</code> со значением <code>auto</code>:</p>
<div class="example-item__content example-item__content--2">
<div class="example-item__block"></div>
<div class="example-item__block"></div>
<div class="example-item__block"></div>
<div class="example-item__block"></div>
<div class="example-item__block"></div>
<div class="example-item__block"></div>
<div class="example-item__block"></div>
<div class="example-item__block"></div>
<div class="example-item__block"></div>
<div class="example-item__block"></div>
</div>
</div>
<div class="page__copyright">
Пример использования свойства <a class="page__copyright-link" href="https://tuhub.ru/refs/css/flex" target="blank">flex в CSS</a>
</div>
</div>
</body>
</html>.example-item__content {
display: flex;
justify-content: center;
align-items: center;
min-height: 100px;
border: 1px solid #333;
}
.example-item__block {
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
margin: 10px;
padding: 10px;
background-color: red;
color: white;
border-radius: 3px;
height: 70px;
width: 70px;
}
.example-item__content--0 .example-item__block {
flex: initial;
}
.example-item__content--1 .example-item__block {
flex: none;
}
.example-item__content--2 .example-item__block {
flex: auto;
}
External CSS
External JavaScript
This Pen doesn't use any external JavaScript resources.