#html #css #flexbox
#HTML #css #flexbox
Вопрос:
Итак, в моем коде у меня есть страница печати с контейнером, установленным на flexbox. в контейнере img grid содержится 23 контейнера для карточек с изображениями и т.д. Все карточки, выровненные должным образом ранее (в контейнере img grid), однако теперь flexbox унаследован только для части дочерних элементов, но около 9 из последних элементов этого не сделали. Публикую несколько картинок. Вот мой код. Я знаю, что в HTML много кода, но большая его часть просто повторение контейнеров, я новичок : ( — приложил скриншот, я хочу, чтобы все изображения располагались в ряд, как тонкие слева. Спасибо. 
.img-grid {
width: 70vw;
height: 90vh;
display: flex;
flex-wrap: nowrap;
justify-content: flex-start;
padding: 2rem;
overflow: scroll;
overflow-x: hidden;
}
.press-info {
width: 350px;
height: 460px;
padding: 1.5rem;
perspective: 1000;
}
.card {
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all 0.5s linear;
font-family: Helvetica, sans-serif;
font-weight: bold;
}
.press-info:hover .card {
transform: rotateY(-180deg);
}
.face {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
text-align: center;
}
.face.front img {
width: 100%;
height: 100%;
}
.face.back {
background-image: var(--gradient);
background-size: 400%;
background-position: right;
transform: rotateY(180deg);
box-sizing: border-box;
padding: 2rem;
color: black;
transition: background-position ease-out 0.8s;
}
.face.back:focus {
background-position: left;
}
.face.back a {
transform: uppercase;
font-size: 1rem;
}
.face.back a span {
font-size: 2rem;
} <div class="press-container">
<div class="img-grid">
<div class="press-info">
<div class="card">
<div class="front face">
<img src="press/press-1.png">
</div>
<div class="back face">
<a href="https://oddamagazine.com/project/fashions-future-designers/">ODDA MAGAZINE : FASHION'S
FUTURE
DESIGNERS <span>⬈</span></a>
</div>
</div>
</div>
<div class="press-info">
<div class="card">
<div class="front face">
<img src="press/press-2.png">
</div>
<div class="back face">
<a href="#">HASHTAG LEGEND : MAY 2020</a>
</div>
</div>
</div>
<div class="press-info">
<div class="card">
<div class="front face">
<img src="press/press-3.png">
</div>
<div class="back face">
<a href="https://www.kaltblut-magazine.com/to-the-ones-that-hurt-the-most/">KALTBLUT Magazine : To
the
ones that hurt the most <span>⬈</span></a>
</div>
</div>
</div>
<div class="press-info">
<div class="card">
<div class="front face">
<img src="press/press-23.png">
</div>
<div class="back face">
<a href="https://1granary.com/designers-3/graduate-shows/csm-ma-fashion-show-2020-full-line-up/">ONE
granary: CENTRAL SAINT MARTINS
MA FASHION SHOW
2020 : FULL LINE-UP <span>⬈</span></a>
</div>
</div>
</div>
<div class="press-info">
<div class="card">
<div class="front face">
<img src="press/press-4.png">
</div>
<div class="back face">
<a href="https://wwd.com/fashion-news/fashion-scoops/central-saint-martins-ma-fashion-recycling-craftsmanship-1203487690/">WWD
: Central Saint Martins MA Fashion Champions Recycling and Craftsmanship <span>⬈</span></a>
</div>
</div>
</div>
<div class="press-info">
<div class="card">
<div class="front face">
<img src="press/press-5.png">
</div>
<div class="back face">
<a href="#">milk magazine hk: october 2019 : FROM BLOOMING YOUTH TO FASHION</a>
</div>
</div>
</div>
<div class="press-info">
<div class="card">
<div class="front face">
<img src="press/press-6.png">
</div>
<div class="back face">
<a href="https://the-comm.online/blog/into-the-woods/">the comm online : into the woods
<span>⬈</span></a>
</div>
</div>
</div>
<div class="press-info">
<div class="card">
<div class="front face">
<img src="press/press-7.png">
</div>
<div class="back face">
<a href="https://www.sleek-mag.com/article/wearable-slime//">SLEEK MAGAZINE : Meet the CSM fashion
grad
making clothes out of slime <span>⬈</span></a>
</div>
</div>
</div>
<div class="press-info">
<div class="card">
<div class="front face">
<img src="press/press-8.png">
</div>
<div class="back face">
<a href="https://1granary.com/designers-3/schools/central-saint-martins/one-year-out/">ONE GRANARY
: ONE
YEAR OUT<span>⬈</span></a>
</div>
</div>
</div>
<div class="press-info">
<div class="card">
<div class="front face">
<img src="press/press-9.png">
</div>
<div class="back face">
<a href="https://whynow.co.uk/read/samson-leung-finds-richness-in-linguistic-mistakes-and-mistranslation/">why
now digital : Samson leung finds richness in liguistic mistakes and mistranslation
<span>⬈</span></a>
</div>
</div>
</div>
<div class="press-info">
<div class="card">
<div class="front face">
<img src="press/press-10.png">
</div>
<div class="back face">
<a href="https://www.dearboymag.com/stories/samson-leung">Dear Boy Magazine : Interview with Samson
Leung
<span>⬈</span></a>
</div>
</div>
</div>
<div class="press-info">
<div class="card">
<div class="front face">
<img src="press/press-11.png">
</div>
<div class="back face">
<a href="https://www.dewmagazine.com/under-the-radar-talent-samson-leung/">UNDER-THE-RADAR TALENT :
SAMSON
LEUNG <span>⬈</span></a>
</div>
</div>
</div>
<div class="press-info">
<div class="card">
<div class="front face">
<img src="press/press-12.png">
</div>
<div class="back face">
<a href="http://example.com/introducing-samson-leung/">I'm Young! : Introducing Samson
Leung
<span>⬈</span></a>
</div>
</div>
</div>
<div class="press-info">
<div class="card">
<div class="front face">
<img src="press/press-13.png">
</div>
<div class="back face">
<a href="">Rain Magazine -> Interview: Samson Leung
</div>
</div>
</div>
<div class="press-info">
<div class="card">
<div class="front face">
<img src="press/press-14.png">
</div>
<div class="back face">
</div>
</div>
</div>
<div class="press-info">
<div class="card">
<div class="front face">
<img src="press/press-15.png">
</div>
<div class="back face">
</div>
</div>
</div>
<!-- </div> -->
<!-- <div class="press-column -4"> -->
<div class="press-info">
<div class="card">
<div class="front face">
<img src="press/press-16.png">
</div>
<div class="back face">
</div>
</div>
</div>
<div class="press-info">
<div class="card">
<div class="front face">
<img src="press/press-17.png">
</div>
<div class="back face">
</div>
</div>
</div>
<div class="press-info">
<div class="card">
<div class="front face">
<img src="press/press-18.png">
</div>
<div class="back face">
</div>
</div>
</div>
<div class="press-info">
<div class="card">
<div class="front face">
<img src="press/press-19.png">
</div>
<div class="back face">
</div>
</div>
</div>
<div class="press-info">
<div class="card">
<div class="front face">
<img src="press/press-20.png">
</div>
<div class="back face">
</div>
</div>
</div>
<div class="press-info">
<div class="card">
<div class="front face">
<img src="press/press-21.png">
</div>
<div class="back face">
</div>
</div>
</div>
<div class="press-info">
<div class="card">
<div class="front face">
<img src="press/press-22.png">
</div>
<div class="back face">
</div>
</div>
</div>
</div>
</div> Комментарии:
1. Посмотрите на отступ фрагмента кода. Вам не хватает по крайней мере одного закрывающего
aтега.2. Я думаю, что @Turnip определил проблему — если вы удалите свой код в W3 HTML validator, вы обнаружите, что у вас есть некоторые проблемы с неправильной разметкой — отсутствуют закрывающие теги и тому подобное. Браузер, как правило, делает все возможное, чтобы попытаться угадать ваши намерения, но это ненадежно и может привести к некоторому странному поведению. Я бы рекомендовал установить какой-нибудь подключаемый модуль linting в вашем редакторе, чтобы выделить ошибки, исправить их все и посмотреть, решит ли это проблему.
Ответ №1:
Вам не хватает одного закрывающего <a> тега
<a href="">Rain Magazine -> Interview: Samson Leung