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

我能看到的唯一问题是你已经添加了填充和flex：25％到列。所以你必须从宽度中减去它，否则它会将第四列推到下一个，或者你可以使用对齐内容来给出这样的均匀间距： -

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

对于normarl屏幕和媒体查询同样的东西，以及从宽度减去填充： -

/* 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%;
    }
}

照片库不相邻对齐

1 个答案: