<div class="flex">
<span>inline-block with long title</span>
<span>inline-block. just block.</span>
</div>.flex {
display: flex;
flex-direction: column;
align-items: flex-end; /*элементы сдвигаются к концу строки*/
text-align: right;
}И еще такой образец - take.ms/ICh5k - подскажите пример правильной реализации.
<input type="number"> <div class="content">
<div class="item">
1
</div>
<div class="item">
2
</div>
<div class="item">
3
</div>
<div class="item">
4
</div>
<div class="item">
5
</div>
</div>* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.content {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-flow: wrap;
-ms-flex-flow: wrap;
flex-flow: wrap;
-webkit-justify-content: space-around;
-ms-flex-pack: distribute;
justify-content: space-around;
width: 95%;
margin: auto;
}
.item {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: calc(100% / 5);
min-width: 200px;
height: 250px;
border: 1px solid #f00;
margin: 15px 5px;
}
@media screen and (max-width: 800px) {
.item:nth-child(1) {
-webkit-box-ordinal-group: 4;
-webkit-order: 3;
-ms-flex-order: 3;
order: 3;
}
.item:nth-child(2) {
-webkit-box-ordinal-group: 2;
-webkit-order: 1;
-ms-flex-order: 1;
order: 1;
}
.item:nth-child(3) {
-webkit-box-ordinal-group: 5;
-webkit-order: 4;
-ms-flex-order: 4;
order: 4;
}
.item:nth-child(4) {
-webkit-box-ordinal-group: 3;
-webkit-order: 2;
-ms-flex-order: 2;
order: 2;
}
.item:nth-child(5) {
-webkit-box-ordinal-group: 6;
-webkit-order: 5;
-ms-flex-order: 5;
order: 5;
}
}А справа вопрос в фоне: если я делаю его фоном к item'у, который входит в inner, то он обрезается (и не тянется на всю оставшуюся область экрана (в зависимости от разрешения монитора)).