照片库不相邻对齐

Question

我正在尝试按照本教程创建一个响应式照片库。 我有一个名为MemoryList 的组件，其定义如下：

import React from 'react';
import _ from 'lodash';

import {MemoryItem} from "./MemoryItem";

class MemoryList extends React.Component {

  renderItems() {
    return _.map(this.props.memory, (memory, index) => <MemoryItem key={index} {...memory}
                                                                   deleteFunc={this.props.deleteFunc}/>)
  }

  render() {
    return (
        <div className="image-row">
          <div className={'column'}>
            {this.renderItems()}
          </div>
        </div>
    )
  }

}
export {MemoryList}

还有我的 css：

.image-row {
    display: -ms-flexbox; /* IE10 */
    display: flex;
    -ms-flex-wrap: wrap; /* IE10 */
    flex-wrap: wrap;
    padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.column {
    -ms-flex: 25%; /* IE10 */
    flex: 25%;
    max-width: 25%;
    padding: 0 4px;
}

.column img {
    margin-top: 8px;
    vertical-align: middle;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
    .column {
        -ms-flex: 50%;
        flex: 50%;
        max-width: 50%;
    }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
    .column {
        -ms-flex: 100%;
        flex: 100%;
        max-width: 100%;
    }
}

所以我正在尝试制作 4 列图像。每列都由我的MemoryList 表示。 MemoryList 接受一个对象数组，然后用于创建MemoryItem：

class MemoryItem extends React.Component {

  renderAction(){
    const profile = JSON.parse(localStorage.getItem('profile'));
    const memory_user = this.props.user;

    if (profile.username === memory_user){
      return (
          <button name={this.props.id} className={'btn btn-primary'} onClick={this.props.deleteFunc}>Delete</button>
      )
    }
  }

  render(){
    return (
          <img name={this.props.id} className={"img-thumbnail"} src={this.props.image_url} alt={'N/A'}/>
    )
  }
}

但是，MemoryLists 并没有相邻放置，而是在彼此下方放置。我做错了什么？

Answer 1

我能看到的唯一问题是您在列中添加了 padding 和 flex: 25%。所以你必须从宽度中减去它，否则它会将第四列推到下一列，或者你可以使用 justify content 来提供均匀的间距，如下所示：-

.image-row {
    display: -ms-flexbox; /* IE10 */
    display: flex;
    -ms-flex-wrap: wrap; /* IE10 */
    flex-wrap: wrap;
    padding: 0 4px;
    justify-content: space-between;
}

.column {
    -ms-flex: 23%; /* IE10 */
    flex: 23%;
    max-width: 23%;
    padding: 0 4px;
}

这适用于正常屏幕，媒体查询也是如此，以及从宽度中减去填充：-

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
    .column {
        -ms-flex: 48%;
        flex: 48%;
        max-width: 48%;
    }
}