如何制作 flex-direction: column; 适当地。 我的代码不起作用

Question

I'm making an ul tag inside a div, and I want them to be under each other.

I couldn't think of any other way to do it than this:

This is my 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;
}

...and this is my 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

This is how it looks right now :

...and this is how it's supposed to look :

Answer 1

Wrap your whole .map() function with a div , and make it flexbox , and then set flex-direction to column . Lastly, delete margin:auto;

Something like this should work:

   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>
    );
  };

Answer 2

Why do you use flex at all? A div usually loads downwards (default behavior is downwards).

Change .bulletpoint to ul might solve your problem.

Answer 3

You code worked as-is, but the rendered HTML should repeat <li> not the whole <ul><li>... </li></ul> block

relevant JSX / ReactJS :

const Bulletpoints = props => {
  return (
    <>
      <div className="bulletpoint-wrapper">
        <ul class="bulletpoints">
          {props.bulletpoints.map((bullet, index) => (
            <li key={index}>
              <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>
    </>
  );
};

working stackblitz here

Answer 4

You need your map to be inside the ul as you only want one ul tag.

<div className="bulletpoint-wrapper">
  <ul className="bulletpoints">
    {props.bulletpoints.map((bullet, index) => (
      <li key={index}>
        <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>

You should also remove flex and flex-flow

Check out this sandbox: https://codesandbox.io/s/react-example-vgtxq

Answer 5

Inside of .map() you are repeating the whole <ul> tag, instead of just a loop for the <li> tag.You can use the below css to achieve your design.

You can check below code and this working stackblitz demo.

CSS

.bulletpoint-wrapper {
    width: 100%;
    background: #04b4f4;
}

.bulletpoints li {
    display: inline-flex;
    width: 100%;
    margin-top: 5px
}

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

.bullets {
    height: 25px;
    width: 25px;
    margin-right: 15px;
}

React Component

const Bulletpoints = props => {

  return (
    <div className="bulletpoint-wrapper">
      <ul class="bulletpoints">{
        props.bulletpoints.map((bullet, index) => (
          <li key={index}>
            <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>)
}

class App extends Component {
  constructor() {
    super();
    this.state = {
      bullet: [{
        text: 'A'
      }, {
        text: 'B'
      }, {
        text: 'C'
      }]
    };
  }

  render() {
    return <Bulletpoints bulletpoints={this.state.bullet} />
  }
}