最小宽度和最大宽度不适用于flex,并且不能与flex方向结合使用

时间:2019-01-19 10:18:37

标签: css css3 flexbox

我有下面两个问题的代码:

  1. 大图未居中。我希望小图像(拇指)保持左对齐。

  2. min-width上的
  3. class thmax-width一样,而真实的max-width 没关系。

我想要的是th不会比min-width小,即使大图较小。

如果有很多拇指,也不要超过max-width。拇指应波纹管。

在此示例中,我使用像素,但也许使用rem,%以避免在较小的屏幕上出现问题。

enter image description here

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

0 个答案:

没有答案