页面宽度变化，块容器居中

最新推荐文章于 2024-05-22 09:30:33 发布

小袁学前端

最新推荐文章于 2024-05-22 09:30:33 发布

阅读量80

点赞数

文章标签： css javascript html

本文链接：https://blog.csdn.net/qq_40088255/article/details/130625351

版权

页面宽度变化，块容器居中

效果

动态改变元素宽度

	  useEffect(() => {
	   changeContainerWidth() // 刚进入页面调用一次
	  },[0])  
	
	  const changeContainerWidth = () => {
	    const containerRef = document.getElementById('container')
	    ,innerContainer = 	document.getElementById('innerContainer')
	    ,containerWidth = containerRef?.offsetWidth;
	    const count = Math.floor((containerWidth + 20) / 220);
	    if(innerContainer){
	      innerContainer.style.width =`${ count * 220}px`;
	    }
	  }
	
	  window.onresize = (e) => {
	    changeContainerWidth()
	  }
       // 页面
       <div id='container' className={styles.container}>
          <div id='innerContainer' className={styles.innerContainer}>
            {
              [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map(item => {
                return <div className={styles.item}>
                  111
                </div>
              })
            }
          </div>
        </div>

样式

        .container{
		  display: flex;
		  justify-content: center;
		  background-color: green;
		}
		
		.innerContainer{
		  margin-right: -20px;
		  background-color: pink;
		}
		
		.item{
		  display: inline-block;
		  margin-right: 20px;
		  margin-bottom: 20px;
		  width: 200px;
		  height: 200px;
		  background-color: #4d7ffa;
		}