Min-width и max-width не работают с flex, а также комбинируются с направлением flex

У меня есть код ниже с двумя проблемами:

  1. Большое изображение не по центру. Я хочу, чтобы маленькие изображения (большие пальцы) оставались выровненными по левому краю.

  2. min-width на class th действует как max-width и настоящий max-width не имеет значения.

Я хочу, чтобы th не становился меньше, чем min-width, даже если большое изображение меньше.

Также не заходите дальше max-width, если там много превьюшек. Большие пальцы должны обернуться ниже.

Например, я использую пиксели, но, возможно, использую rem,%, чтобы избежать проблем на небольших экранах.

Min-width и max-width не работают с flex, а также комбинируются с направлением flex

.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>

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

user3541631 19.01.2019 11:21

нужно добавить flex-shrink:0;

Temani Afif 19.01.2019 11:24

Я добавил изображение, моя проблема в том, почему большие пальцы не переносятся ниже, если достигнута максимальная ширина?

user3541631 19.01.2019 11:25

и для центрирования просто используйте margin: auto; в div изображения

Temani Afif 19.01.2019 11:25

если вы хотите, чтобы они были обернуты, вам нужно добавить flex-wrap:wrap

Temani Afif 19.01.2019 11:26

Благодарность; и центрирование большого изображения ?, у меня есть justify-content: center, но, похоже, не работает

user3541631 19.01.2019 11:28

использовать margin auto для div изображения

Temani Afif 19.01.2019 11:29

Я добавил более релевантные дубликаты, дайте мне знать, если они будут полезны

Temani Afif 19.01.2019 11:33

нет все решилось спасибо

user3541631 19.01.2019 11:37
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
0
9
132
0

Другие вопросы по теме