У меня есть следующий код:
@import url('https://fonts.googleapis.com/css?family=Abril+Fatface');
ol {
list-style: none;
counter-reset: my-awesome-counter;
display: flex;
flex-wrap: wrap;
margin: 0;
padding: 0;
}
ol li {
counter-increment: my-awesome-counter;
display: flex;
width: 50%;
font-size: 0.8rem;
margin-bottom: 0.5rem;
}
ol li::before {
content: counter(my-awesome-counter);
font-weight: bold;
font-size: 3rem;
margin-right: 0.5rem;
font-family: 'Abril Fatface', serif;
line-height: 1;
width: 150px;
display: inline-block;
border: 1px solid red;
text-align: right;
}
body {
padding: 1rem;
font-family: sans-serif;
}
<ol>
<li>Lorem ipsum dolor sit amet.</li>
<li>Tempore nostrum laborum sequi obcaecati.</li>
<li>Illo iusto dolores magnam ratione!</li>
<li>Very very very very very very very very very very very very ...long text!</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ol>
Результат выглядит следующим образом:
Как я могу сделать 4-й красный квадрат шириной 150 пикселей? Здесь тоже ссылка codepen.io.
Вы можете указать, чтобы он не сжимался в любом случае, добавив flex-shrink: 0
— см. демо ниже:
@import url('https://fonts.googleapis.com/css?family=Abril+Fatface');
ol {
list-style: none;
counter-reset: my-awesome-counter;
display: flex;
flex-wrap: wrap;
margin: 0;
padding: 0;
}
ol li {
counter-increment: my-awesome-counter;
display: flex;
width: 50%;
font-size: 0.8rem;
margin-bottom: 0.5rem;
}
ol li::before {
content: counter(my-awesome-counter);
font-weight: bold;
font-size: 3rem;
margin-right: 0.5rem;
font-family: 'Abril Fatface', serif;
line-height: 1;
width: 150px;
display: inline-block;
border: 1px solid red;
text-align: right;
flex-shrink: 0; /* added */
}
body {
padding: 1rem;
font-family: sans-serif;
}
<ol>
<li>Lorem ipsum dolor sit amet.</li>
<li>Tempore nostrum laborum sequi obcaecati.</li>
<li>Illo iusto dolores magnam ratione!</li>
<li>Ampedit! impredit!Amet odio rerum alias impedit!Amet odio rerum alias impedit!Amet odio rerum alias impedit!Amet odio rerum alias impedit!Amet odio rerum alias impedit!Amet odio rerum alias impedit!Amet odio rerum alias impedit!Amet odio rerum alias
impedit!Amet odio rerum alias impedit!Amet odio rerum alias impedit!Amet odio rerum alias impedit!Amet odio rerum alias impedit!Amet odio rerum alias impedit!Amet odio rerum alias impedit!Amet odio rerum alias impedit!Amet odio rerum alias impedit!Amet
odio rerum alias impedit!Amet odio rerum alias impedit!Amet odio rerum alias impedit!Amet odio rerum alias impedit!Amet odio rerum alias impedit!Amet odio rerum alias impedit!Amet odio rerum alias impedit!Amet odio rerum alias impedit!Amet odio rerum
alias impedit!Amet odio rerum alias impedit!Amet odio rerum alias impedit!Amet odio rerum alias impedit!Amet odio rerum alias impedit!Amet odio rerum alias impedit!Amet odio rerum alias impedit!Amet odio rerum alias impedit!Amet odio rerum alias impedit!Amet
odio rerum alias impedit!Amet odio rerum alias impedit!Amet odio rerum alias impedit!Amet odio rerum alias impedit!Amet odio rerum alias impedit!Amet odio rerum alias impedit!Amet odio rerum alias impedit!</li>
<li>Amet odio rerum alias impedit!</li>
<li>Amet odio rerum alias impedit!</li>
<li>Amet odio rerum alias impedit!</li>
<li>Amet odio rerum alias impedit!</li>
<li>Amet odio rerum alias impedit!</li>
<li>Amet odio rerum alias impedit!</li>
<li>Amet odio rerum alias impedit!</li>
<li>Amet odio rerum alias impedit!</li>
<li>Amet odio rerum alias impedit!</li>
<li>Amet odio rerum alias impedit!</li>
</ol>