本文共 2289 字，大约阅读时间需要 7 分钟。

import React, { useState } from 'react'export default () => {  const childArr = ['red', 'green', 'orange', 'purple']  const flexDirectionArr = ['row', 'row-reverse', 'column', 'column-reverse']  const alignItemsArr = ['stretch', 'flex-start', 'flex-end', 'center', 'baseline']  const justifyContentArr = ['flex-start', 'flex-end', 'space-between', 'space-around', 'center']  const flexWrapArr = ['nowrap', 'wrap', 'wrap-reverse']  const alignContentArr = ['stretch', 'flex-start', 'flex-end', 'space-between', 'space-around', 'center']  const [flexDirection, setFlexDirection] = useState('row')  const [alignItems, setAlignItems] = useState('stretch')  const [justifyContent, setJustifyContent] = useState('flex-start')  const [flexWrap, setFlexWrap] = useState('nowrap')  const [alignContent, setAlignContent] = useState('stretch')  const containerStyle = {    display: 'flex',    flexDirection,    alignItems,    justifyContent,    flexWrap,    alignContent,    height: 540,    border: '1px solid #ccc'  }  const childStyle = {    textAlign: 'center',    lineHeight: '100%',    color: 'white',    fontSize: 20  }  const width = 120  const marginRight = 20  return 
   
    
    
      
     
      Flex Direction
     
      
     
              {          flexDirectionArr.map((item, index) => 
       { setFlexDirection(e.target.value) }} />{item})        }      
     
    
    
    
    
      
     
      Align Items
     
      
     
              {          alignItemsArr.map((item, index) => 
       { setAlignItems(e.target.value) }} />{item})        }      
     
    
    
    
    
      
     
      Justify Content
     
      
     
              {          justifyContentArr.map((item, index) => 
       {            setJustifyContent(e.target.value)          }} />{item})        }      
     
    
    
    
    
      
     
      Flex Wrap
     
      
     
              {          flexWrapArr.map((item, index) => 
       { setFlexWrap(e.target.value) }} />{item})        }      
     
    
    
    
    
      
     
      Align Content
     
      
     
              {          alignContentArr.map((item, index) => 
       { setAlignContent(e.target.value) }} />{item})        }      
     
    
    
    
    
           {        childArr.map((backgroundColor, index) => 
     
      {index + 1}
     
)      }    
    
  
   
}

转载地址：http://dtdqi.baihongyu.com/