Работа с Flexbox на примере игральных кубов

02.11.2015

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

test.html (Download)

 <!DOCTYPE HTML>
<html lang="ru-Ru">
<head>
	<meta charset="UTF-8">
	<title>Flexbox test</title>
	
<style type="text/css">

.my-flex-block{
	border: 1px solid red;
}

.my-flex-container{
	display: flex;
	flex-direction: column;
	justify-content : center;
	
	height: 300px;
	background-color: #01feb3;
}

.block2
{
/*	flex-grow: 2;*/
}

.block1
{
	order: 3;
}

.block2
{
	order: 1;
}

.block3
{
	order: 2;
}



/*--------------------------*/
.pip {
    background-color: #333;
    border-radius: 50%;
    box-shadow: 0 3px #111 inset, 0 -3px #555 inset;
    display: block;
    height: 24px;
    margin: 4px;
    width: 24px;
}

.face1,
.face2,
.face3,
.face4,
.face5,
.face6
{
    display: flex;
    background-color: #e7e7e7;
    border-radius: 10%;
    box-shadow: 0 5px white inset, 0 -5px #bbb inset, 5px 0 #d7d7d7 inset, -5px 0 #d7d7d7 inset;
    height: 104px;
    margin: 16px;
    object-fit: contain;
    padding: 4px;
    width: 104px;
}
/*--------------------------*/
.face1
{
	justify-content: center;
	align-items: center;
}
/*--------------------------*/
.face2
{
	align-items: flex-start;
	justify-content: space-between;
}

.face2 .pip:nth-of-type(2) {
    align-self: flex-end;
}
/*--------------------------*/
.face3
{
	align-items: flex-start;
	justify-content: space-between;
}

.face3 .pip:nth-of-type(2) {
    align-self: center;
}

.face3 .pip:nth-of-type(3) {
    align-self: flex-end;
}
/*--------------------------*/
.face4
{
	justify-content: space-between;
	flex-direction : column;
}

.face4 div {
    display: flex;
    justify-content: space-between;
}
/*--------------------------*/
.face5
{
	justify-content: space-between;
}

.face5 div {
    display: flex;
	flex-direction : column;
    justify-content: space-between;
/*    border: 1px solid red;*/
}

.face5 div:nth-of-type(2){
    justify-content: center;
}
/*--------------------------*/
.face6
{
	justify-content: space-between;
}

.face6 div {
    display: flex;
	flex-direction : column;
    justify-content: space-between;
/*    border: 1px solid red;*/
}

/*.face6 div:nth-of-type(2){
    justify-content: center;
}*/
/*--------------------------*/
</style>
</head>
<body>

<div class="face1">
	<span class="pip"></span>
</div>

<div class="face2">
	<span class="pip"></span>
	<span class="pip"></span>
</div>

<div class="face3">
	<span class="pip"></span>
	<span class="pip"></span>
	<span class="pip"></span>
</div>

<div class="face4">
	<div class="column">
		<span class="pip"></span>
		<span class="pip"></span>
	</div>
	<div class="column">
		<span class="pip"></span>
		<span class="pip"></span>
	</div>
</div>

<div class="face5">
	<div class="column">
		<span class="pip"></span>
		<span class="pip"></span>
	</div>
	<div class="column">
		<span class="pip"></span>
	</div>
	<div class="column">
		<span class="pip"></span>
		<span class="pip"></span>
	</div>
</div>

<div class="face6">
	<div class="column">
		<span class="pip"></span>
		<span class="pip"></span>
		<span class="pip"></span>
	</div>
	<div class="column">
		<span class="pip"></span>
		<span class="pip"></span>
		<span class="pip"></span>
	</div>
</div>



</body>
</html>

Категории: CSS

Работа с Flexbox на примере игральных кубов

test.html (Download)

Связанные материалы: