CSS - не позволяйте новым строкам текста нарушать выравнивание flex
У меня есть следующий CSS, который позволяет мне создать строку, которая переносится в зависимости от размера экрана. Если места достаточно, все элементы отображаются в одной строке, в противном случае они переносятся на следующую строку с правильным выравниванием.
Моя проблема в том, что у меня есть текст описания под каждым «квадратным» div. Если этот текст состоит только из одной строки, проблем нет, но если этот текст состоит из 2 или более строк, квадрат, находящийся под ним, поднимается вверх и больше не выравнивается со своими братьями и сестрами. Как я могу предотвратить это? Я включил пример кода в виде фрагмента, его проще всего открыть в полноэкранном режиме, чтобы увидеть, о чем я говорю. Я хочу, чтобы вершины квадратов всегда были выровнены
.flex-row {
display: flex;
flex-direction: row;
justify-content: space-evenly;
flex-wrap: wrap;
align-self: stretch;
}
.flex-col {
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
}
.sub-row {
display: flex;
flex-direction: row;
justify-content: space-evenly;
width: 300px;
}
.square {
height: 250px;
width: 250px;
background-color: #900;
}<body>
<div class = "flex-row">
<div class = "flex-col">
<div class = "square">
</div>
<div class = "sub-row">
<p>
Placeholder text Placeholder text Placeholder text Placeholder text Placeholder text
</p>
<p>
00
</p>
</div>
</div>
<div class = "flex-col">
<div class = "square">
</div>
<div class = "sub-row">
<p>
Placeholder text
</p>
<p>
00
</p>
</div>
</div>
<div class = "flex-col">
<div class = "square">
</div>
<div class = "sub-row">
<p>
Placeholder text
</p>
<p>
00
</p>
</div>
</div>
<div class = "flex-col">
<div class = "square">
</div>
<div class = "sub-row">
<p>
Placeholder text
</p>
<p>
00
</p>
</div>
</div>
</div>
</body>Я пытался обосновать столбцы для flex-start и flex-end, но это не работает. Я также пытался использовать свойство align self для самого элемента p, но я не могу выровнять квадраты, если текст занимает 2 или более строк.
Ответы 1
Дайте align-items: flex-startflex-row (это переопределяет поведение дефолтstretch).
Ваш динамический текст, находящийся ниже квадраты, упрощает задачу, так как при обертке гибкие элементы обертка гибкие линии будет подстраиваться под высоту динамический текст в предшествующей гибкая линия.
См. демо ниже:
.flex-row {
display: flex;
flex-direction: row;
justify-content: space-evenly;
flex-wrap: wrap;
/* align-self: stretch;*/
align-items: flex-start; /* ADDED */
}
.flex-col {
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
}
.sub-row {
display: flex;
flex-direction: row;
justify-content: space-evenly;
width: 300px;
}
.square {
height: 250px;
width: 250px;
background-color: #900;
}<body>
<div class = "flex-row">
<div class = "flex-col">
<div class = "square">
</div>
<div class = "sub-row">
<p>
Placeholder text Placeholder text Placeholder text Placeholder text Placeholder text
</p>
<p>
00
</p>
</div>
</div>
<div class = "flex-col">
<div class = "square">
</div>
<div class = "sub-row">
<p>
Placeholder text
</p>
<p>
00
</p>
</div>
</div>
<div class = "flex-col">
<div class = "square">
</div>
<div class = "sub-row">
<p>
Placeholder text
</p>
<p>
00
</p>
</div>
</div>
<div class = "flex-col">
<div class = "square">
</div>
<div class = "sub-row">
<p>
Placeholder text
</p>
<p>
00
</p>
</div>
</div>
</div>
</body>это потому, что ваши square и sub-row имеют ширину определенный, поэтому они заполняют строку, а затем оборачивают...
но даже при отображении всего одного квадрата основная строка заполняет всю ширину экрана. Даже если я удалю все свойства ширины и оставлю единственный текстовый узел, он будет правильно оправдан
при отображении одного квадрата он выравнивается по строке с помощью justify-content: space-evenly, который добавляется в ваш flexbox...
Почему вы заканчиваете каждое свое утверждение многоточием? Насколько я понимаю, гибкий контейнер не будет иметь полную ширину, если она не указана, поэтому свойство justify-content не должно ничего делать, поскольку ширина — это просто ширина содержимого. Очевидно, я неправильно понимаю, но вы не хотите или не можете помочь, поэтому у меня больше нет к вам вопросов, спасибо за ваш ответ.
Эй, чувак, здесь уже больше 12 часов, и я слишком сонный, извини, если ты считаешь, что я бесполезен. display: flex — это элемент блочного уровня (также есть версия inline-flex). Если у вас есть один гибкий элемент во флексбоксе, он получает полную ширину области просмотра до сгибаться. А многоточие - это привычка :)
вы были очень полезны, и даже больше с этим объяснением. Думаю, у меня есть привычка раздражаться многоточием, лол, никаких обид
это кажется очевидным в ретроспективе, но я испытываю трудности с гибкостью, большое спасибо, это вызывало у меня головную боль. Вопрос, почему строка все равно заполняет ширину экрана без align-self stretch? Я думал, что мне это нужно, чтобы правильно применить выравнивание контента или, по крайней мере, как
width: 100%илиflex: 1или что-то в этом роде.