javascript - CSS集中框，没有理由居中

This question already has answers here:

Can I change the “justify-content” value depending on the number of elements in the flex container?
                                
                                    （4个答案）
                                
                        
                                2年前关闭。
            
                    

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对齐到父级的左侧。

最佳答案

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

像这样

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

关于javascript - CSS集中框，没有理由居中，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47124461/