Question

简单地以Facebook风格，我想做这样的事情：

我使用过CSS flex，但我只能在行中而不是列中进行。总宽度是固定尺寸，总高度和列宽必须缩放并覆盖所有区域。图像必须保持纵横比。

我的代码适用于2行。我希望列中的图像具有相同的结果。

    <style>
        #main{
            width:640px;
            margin: 0 auto;
        }
        .flex-row1, .flex-row2 {
            display: flex;
            flex-direction: row;          
        }
        .inner {
            flex: 1 1 auto;             
            padding: 0;
            margin: 0;
            margin-right:2px;           
        }
        .inner.last {
            margin-right:0;
            position:relative;          
        }
        .flex-row1 .inner{
            margin-bottom:2px;
        }
        img {
          max-width:100%;
          max-height: 250px;
        }
        .more-container {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.4);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .more {
            font-family: Tahoma, Geneva, sans-serif;
            color: #fff;
            font-size: 30px;
        }
    </style>

<div id="main">

    <div class="flex-row1">   
      <figure class="inner">
        <img src="https://www.wemedia.it/cms/wp-content/uploads/2017/03/commodore64-android-640x283.jpg">
      </figure>
      <figure class="inner last">
        <img src="https://www.wemedia.it/cms/wp-content/uploads/2017/02/Esslinger-Frog-Design-Apple-1982-640x480.jpg">
      </figure>
    </div>

    <div class="flex-row2">   
      <figure class="inner">
        <img src="https://www.wemedia.it/cms/wp-content/uploads/2017/04/commodore64-silver-label-640x435.jpg">
      </figure>
      <figure class="inner">
        <img src="https://www.wemedia.it/cms/wp-content/uploads/2017/04/commodore64_sx.jpg">
      </figure>
       <figure class="inner last">
        <img src="https://www.wemedia.it/cms/wp-content/uploads/2017/04/C64_golden_edition-640x500.jpg">
        <div class="more-container"><div class="more">+3</div></div>
      </figure>
    </div>

</div>

Answer 1

＆＃13;

get_extra_kwargs

＆＃13;

.equal-height-container {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
}



.first {
  background-color: yellow;
  flex: 1;
  display: flex;
 flex-direction: column;
}

.first-a {
  background-color: blue;
  flex: 1;
}

.first-b {
  background-color: orange;
  flex: 1;
}

.second {
  background-color: yellow;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.second-a {
  background-color: #c0dbe2;
  flex: 1;
}

.second-b {
  background-color: #cdf1c3;
  flex: 1;
}
.second-c {
  background-color: red;
  flex: 1;
}

＆＃13;

2（或更多）列照片网格保持纵横比

1 个答案: