时间戳

首页 > 解决方案 > 从左到右将元素添加到居中的 flexbox

html - 从左到右将元素添加到居中的 flexbox

问题描述

我有一个弹性框可以在屏幕上居中 3 个 div。所有这三个都包裹在一个弹性容器周围，该容器使justify-content: center它们在屏幕中居中。但是，由于我使用动画并且每个 div 一个接一个地添加，所以第一个 div 被添加在中心而不是开头，第二个被添加以便第一个和第二个都居中，当第三个是添加，所有这些都对齐，使得第二个 div 正好在屏幕的中间。我想改变这一点，使每个 div 从左到右就地添加，而所有 div 都在屏幕中居中。

当前行为 Flex Box

反应代码：

function foo() {
  const [items, set] = React.useState([]);
  const transitions = useTransition(items, (item) => item.key, {
    from: { transform: "translate3d(0,-40px,0)" },
    enter: { transform: "translate3d(0,0px,0)" },
    leave: { transform: "translate3d(0,-40px,0)" },
  });

  React.useEffect(() => {
    for (let i = 0; i < rows.length; i++) {
      setTimeout(() => {
        set((items) => {
          const newItems = [...items];
          newItems.push({ key: i, code: rows[i] });
          return newItems;
        });
      }, 1000 * i);
    }
  }, []);

  return (
    <center>
      <div class="flex-container">
        {transitions.map(({ item, props, key }) => {
          return (
            <animated.div key={key} style={props} class="flex-item">
              {item.code}
            </animated.div>
          );
        })}
      </div>
    </center>
  );
}

造型：

.flex-container {
  height: 50vh;
  display: flex;
  justify-content: center;


  img{
    width: 20%;
    text-align: center;
  }
} 


.flex-item {
  flex-basis: 14%;
  align-self: center;

  margin: 12px;
  h4{
    font-family: Lato;
    font-weight:700;
    color: white;
  }
  p{
    color: white;
    font-family: Lato;
  }
}

更改center为flex-start将所有内容转移到开头： 弹性启动

添加固定宽度也不起作用：

固定宽度

标签： htmlcssreactjs

解决方案

要解决您的问题，只需按照您希望它们移动后的方式对齐卡片，然后应用以下 CSS：

.card {
    position: relative;
    top: -100px;
}

如果 -100px 还不够，请尝试 -200px。目标是卡片将在屏幕外显示在顶部。无论您希望执行什么操作，无论是单击下面我的片段中的按钮，还是在页面加载时，将“top”属性更改为 0，它会将卡片放置在页面正常流程中它所属的位置。

我还使用 setTimeout 函数来延迟每张后续卡片，并使用 transition 属性来平滑动画，因为这似乎是您想要的目标。

const left = document.getElementById("left");
const center = document.getElementById("center");
const right = document.getElementById("right");

function foo() {
  left.style.top = "0";
  setTimeout(function() {
    center.style.top = "0";
    setTimeout(function() {
      right.style.top = "0";
    }, 500)
  }, 500)

}
#container {
  display: flex;
  justify-content: center;
}

#container>* {
  width: 100px;
  height: 50px;
  background: red;
  margin: 0 0.5em;
  position: relative;
  top: -100px;
  transition: top 1s ease-in-out;
}

button {
  margin: auto;
}
<div id="container">
  <div id="left"></div>
  <div id="center"></div>
  <div id="right"></div>
</div>
<button onclick="foo()" id="click-me">Click me!</button>

推荐阅读