У меня есть код ниже с двумя проблемами:
Большое изображение не по центру. Я хочу, чтобы маленькие изображения (большие пальцы) оставались выровненными по левому краю.
min-width на class th действует как max-width и настоящий max-width
не имеет значения.
Я хочу, чтобы th не становился меньше, чем min-width, даже если большое изображение меньше.
Также не заходите дальше max-width, если там много превьюшек. Большие пальцы должны обернуться ниже.
Например, я использую пиксели, но, возможно, использую rem,%, чтобы избежать проблем на небольших экранах.
.content {
display: flex;
flex-direction: row;
border: 1px solid red;
}
.th {
display: flex;
align-items: flex-start;
flex-direction: column;
margin: 0 30px 0 0;
min-width: 30%;
max-width: 60%;
border: 1px solid blue;
}
.cimage img{
padding:10px;
max-height: 200px;
max-width: 200px;
}
.thumbs {
display: flex;
justify-content: flex-start;
}
.thumb {
margin: 5px 5px 0 0;
}<div class = "content">
<div class = "th" >
<div class = "items" >
<div class = "item">
<div class = "cimage"><img src = "https://via.placeholder.com/200"/></div>
</div>
</div>
<div class = "thumbs">
<div class = "thumb"><img src = "https://via.placeholder.com/50"/></div>
<div class = "thumb"><img src = "https://via.placeholder.com/50"/></div>
<div class = "thumb"><img src = "https://via.placeholder.com/50"/></div>
<div class = "thumb"><img src = "https://via.placeholder.com/50"/></div>
<div class = "thumb"><img src = "https://via.placeholder.com/50"/></div>
<div class = "thumb"><img src = "https://via.placeholder.com/50"/></div>
</div>
</div>
<div class = "text">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publish
</div>нужно добавить flex-shrink:0;
Я добавил изображение, моя проблема в том, почему большие пальцы не переносятся ниже, если достигнута максимальная ширина?
и для центрирования просто используйте margin: auto; в div изображения
если вы хотите, чтобы они были обернуты, вам нужно добавить flex-wrap:wrap
Благодарность; и центрирование большого изображения ?, у меня есть justify-content: center, но, похоже, не работает
использовать margin auto для div изображения
Я добавил более релевантные дубликаты, дайте мне знать, если они будут полезны
нет все решилось спасибо






Я сделал поправку. У меня было это в scss, и я перешел на css