javascript - 如何使 flex-direction : column; properly. 我的代码不起作用

Question

我在一个 div 中制作一个 ul 标签，我希望它们位于彼此之下。

除了这个，我想不出任何其他方法:

这是我的CSS:

.bulletpoint-wrapper {
  height: 170px;
  width: 685px;
  background: #04b4f4;
  display: flex;
  flex-flow: column wrap;
}

.bulletpoints {
  color: #001c42;
  list-style: none;
  margin: auto;
}

.bullets {
  height: 25px;
  width: 25px;
}

...这是我的JSX:

import React from 'react'
import 'components/layout/TextMedia.css'

const Bulletpoints = props => {

  return props.bulletpoints.map((bullet, index) => (
    <div className="bulletpoint-wrapper">
      <ul key={index} class="bulletpoints">
        <li>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            fill="currentColor"
            viewBox="0 0 50 50"
            className="bullets"
          >
            <path d="M14.402 4C8.666 4 4 8.666 4 14.402v21.196C4 41.334 8.666 46 14.402 46h21.196C41.334 46 46 41.334 46 35.598V14.402C46 8.666 41.333 4 35.596 4H14.402zm2.125 9h16.946A3.531 3.531 0 0137 16.527v16.946A3.532 3.532 0 0133.47 37H16.528A3.531 3.531 0 0113 33.473V16.527A3.531 3.531 0 0116.527 13zM19 19v12h12V19H19z" />
          </svg>
          {bullet.text}
        </li>
      </ul>
    </div>
  ));
}

export default Bulletpoints

这是现在的样子:

...这是它应该看起来的样子:

Answer 1

用div包裹你的整个.map()函数，让它成为flexbox，然后设置flex-direction 到 列。最后，删除 margin:auto;

像这样的东西应该可以工作:

   const Bulletpoints = props => {
    return (
      <div style={{ display: "flex", flexDirection: "column" }}>
        {props.bulletpoints.map((bullet, index) => (
          <div className="bulletpoint-wrapper">
            <ul key={index} class="bulletpoints">
              <li>
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  fill="currentColor"
                  viewBox="0 0 50 50"
                  className="bullets"
                >
                  <path d="M14.402 4C8.666 4 4 8.666 4 14.402v21.196C4 41.334 8.666 46 14.402 46h21.196C41.334 46 46 41.334 46 35.598V14.402C46 8.666 41.333 4 35.596 4H14.402zm2.125 9h16.946A3.531 3.531 0 0137 16.527v16.946A3.532 3.532 0 0133.47 37H16.528A3.531 3.531 0 0113 33.473V16.527A3.531 3.531 0 0116.527 13zM19 19v12h12V19H19z" />
                </svg>
                {bullet.text}
              </li>
            </ul>
          </div>
        ))}
      </div>
    );
  };