css集中框无需中心

Question

import React from 'react';
import { render } from 'react-dom';

const styles = {
  display: 'flex',
  justifyContent: 'center',
  flexWrap: 'wrap',
};

const item = {
  width: '26%',
}

const container = {
   marginLeft: 'auto',  
   marginRight: 'auto',
   width: '100%',
}

const App = () => (
  <div style={container}>
    <div style={styles}>
      <div style={item}>test1</div>
      <div style={item}>test2</div>
      <div style={item}>test3</div>
      <div style={item}>test4</div>
    </div>
  </div>
);

render(<App />, document.getElementById('root'));

是否有办法让test4显示在test1下，但仍然将项目集中在父容器中？

将justifyContent更改为flex-start会导致整个Flexbox与父级左侧对齐。

Answer 1

1. 您的商品通常应为flex: 1 1 33%，这是flex-grow，flex-shrink和flex-basis;
的快捷方式
2. 您必须选择第四项并设置flex-basis: 100%;
3. 在flexbox项目中创建子项，然后集中它们。

根据我的经验，你应该从不将组件作为flexbox的直接子项;您应始终将这些项目用作组件的容器。

请记住，旧浏览器（IE10）不支持flexbox，大多数IE版本都存在flexbox问题。小心使用。

Answer 2

您需要在inner容器上指定宽度，并添加margin: 0 auto以使其居中。

像这样的东西

const styles = {
  display: 'flex',
  width: '70%',
  flexWrap: 'wrap',
  marginLeft: 'auto',
  marginRight: 'auto',
};