Отображение вложенного компонента справа и родительского элемента слева

Question

У меня есть компонент details, вложенный в компонент todo.Как отобразить компонент details в правом столбце и компонент todo в левом столбце?Могу ли я использовать flexbox для этого?Это вообще возможно с таким вложением?Есть ли другой способ?Без использования flexbox

Код здесь: https://stackblitz.com/edit/react-xknr8o

Todos

class Todos extends Component {
  constructor() {
    super();
    this.state = {
      name: 'React'
    };
  }

  render() {
    return (
      <div className="todos">
        <Todo />  
      </div>
    );
  }
}

Todo

class Todo extends Component {
  constructor() {
    super();
    this.state = {
      name: 'React'
    };
  }

  render() {
    return (
      <div className="todo">  
        <h3>
          Todo
        </h3>
        <Details />
      </div>
    );
  }
}

Подробности

class Details extends Component {
  constructor() {
    super();
    this.state = {
      name: 'React'
    };
  }

  render() {
    return (
      <div className="details">
        <h3>
          Details
        </h3>
        <Paragraph />
      </div>
    );
  }
}

Абзац

class Paragraph extends Component {
  constructor() {
    super();
    this.state = {
      name: 'React'
    };
  }

  render() {
    return (
      <div>
        <p>
          Paragraph
        </p>
      </div>
    );
  }
}

CSS

.todos {
  border: 1px solid black;
  width: 500px;
  display: flex;
}

.todo {
  width: 250px;
  border: 1px solid yellow;
}

.details {
  width: 250px;
  border: 1px solid red;
  display:flex;
  flex-direction: column;
  justify-content: flex-end;
}


render(<Todos />, document.getElementById('root'));

Answer 1

При правильном использовании вы можете испечь яйцо с помощью Flexbox Layout. Я немного скорректировал ваш код и фактически проигнорировал код React. В этом сообщении важен только последний HTML-код.

Я добавил несколько строк, чтобы получить список TODO.

Решение состоит в том, чтобы решить, что представляют ваши классы:

A 'строка из 1: N столбцов' или 'столбец из 1: N строк' . Как только это будет установлено, вам нужно разделить пространство над .todo>h3 и .details.

ДОПОЛНИТЕЛЬНО Когда вы можете изменить HTML, возможно, вы захотите встроить .todo>h3 в якорь a и игрушку с постоянными строками ....

UPDATE Повторно введено width в todos, todo и details из оригинального CSS.

Посмотрите, что будет дальше (перейдите в полноэкранный режим и измените размер браузера):

/* Relevant Rules*/

/* UDATE reintroduced original WIDTH on below classes */
/* still works, but looks less purdy */
.todos               { display: flex; flex-direction: column; width: 500px; }
.todo                { display: flex; flex-direction: row   ; width: 250px; }
.details             { display: none; flex-direction: column; width: 250px; } /* initially hidden */




.todo>:first-child   { flex: 1 } /* either <h3> or <a> */
.details             { flex: 4 } /* take up 4 times more space than :first-child */

.todo:hover>.details { display: flex } /* show on hover/focus only */

/* irrelevant some niceness */
h3                   { margin: 0 }

.todo                { border-bottom: 1px solid #ddd }
.todo>:first-child   { padding: .5rem } /* either <h3> or <a> */
.details             { padding: .5rem; background-color: CornSilk; color: black }
.todo:hover          { background-color: CornflowerBlue; color: CornSilk }

/*************************************/
/*EXTRA when you are able to use <a> */
/*************************************/
/*  */
.todo>a              { text-decoration: none; color: currentColor }
.todo>a:focus+.details { display: flex }
/* Will show details persistent on hover>click/tap until focus shifts */

<div id="root">
        <div class="todos">

            <div class="todo">
                <h3>plain todo Line</h3>
                <div class="details">
                    <h3>Details</h3>
                    <div>
                        <p>Pro ea nonumy integre, mel at solum corpora. Id viris audiam repudiare cum, pri dolore appareat ex, per propriae detracto tacimates ex.
                            Elitr sapientem quo et, usu suas porro tibique cu. Iusto causae eos et, tota principes interesset et eos. Similique intellegam cum ei, unum
                            qualisque mel et, regione verterem delicatissimi qui ut. Aliquam incorrupte ea pro, vel veritus consequat id.</p>
                    </div>
                </div>
            </div>

            <div class="todo">
                <a href="javascript:(void)"><h3>todo line with &lt;a&gt; click</h3></a>
                <div class="details">
                    <h3>Details</h3>
                    <div>
                        <p>Pro ea nonumy integre, mel at solum corpora. Id viris audiam repudiare cum, pri dolore appareat ex, per propriae detracto tacimates ex.
                            Elitr sapientem quo et, usu suas porro tibique cu. Iusto causae eos et, tota principes interesset et eos. Similique intellegam cum ei, unum
                            qualisque mel et, regione verterem delicatissimi qui ut. Aliquam incorrupte ea pro, vel veritus consequat id.</p>
                    </div>
                </div>
            </div>

            <div class="todo">
                <h3>plain todo Line</h3>
                <div class="details">
                    <h3>Details</h3>
                    <div>
                        <p>Pro ea nonumy integre, mel at solum corpora. Id viris audiam repudiare cum, pri dolore appareat ex, per propriae detracto tacimates ex.
                            Elitr sapientem quo et, usu suas porro tibique cu. Iusto causae eos et, tota principes interesset et eos. Similique intellegam cum ei, unum
                            qualisque mel et, regione verterem delicatissimi qui ut. Aliquam incorrupte ea pro, vel veritus consequat id.</p>
                    </div>
                </div>
            </div>

            <div class="todo">
                <a href="javascript:(void)"><h3>todo line with &lt;a&gt; click</h3></a>
                <div class="details">
                    <h3>Details</h3>
                    <div>
                        <p>Pro ea nonumy integre, mel at solum corpora. Id viris audiam repudiare cum, pri dolore appareat ex, per propriae detracto tacimates ex.
                            Elitr sapientem quo et, usu suas porro tibique cu. Iusto causae eos et, tota principes interesset et eos. Similique intellegam cum ei, unum
                            qualisque mel et, regione verterem delicatissimi qui ut. Aliquam incorrupte ea pro, vel veritus consequat id.</p>
                    </div>
                </div>
            </div>

            <div class="todo">
                <a href="javascript:(void)"><h3>todo line with &lt;a&gt; click</h3></a>
                <div class="details">
                    <h3>Details</h3>
                    <div>
                        <p>Pro ea nonumy integre, mel at solum corpora. Id viris audiam repudiare cum, pri dolore appareat ex, per propriae detracto tacimates ex.
                            Elitr sapientem quo et, usu suas porro tibique cu. Iusto causae eos et, tota principes interesset et eos. Similique intellegam cum ei, unum
                            qualisque mel et, regione verterem delicatissimi qui ut. Aliquam incorrupte ea pro, vel veritus consequat id.</p>
                    </div>
                </div>
            </div>

            <div class="todo">
                <h3>plain todo Line</h3>
                <div class="details">
                    <h3>Details</h3>
                    <div>
                        <p>Pro ea nonumy integre, mel at solum corpora. Id viris audiam repudiare cum, pri dolore appareat ex, per propriae detracto tacimates ex.
                            Elitr sapientem quo et, usu suas porro tibique cu. Iusto causae eos et, tota principes interesset et eos. Similique intellegam cum ei, unum
                            qualisque mel et, regione verterem delicatissimi qui ut. Aliquam incorrupte ea pro, vel veritus consequat id.</p>
                    </div>
                </div>
            </div>

            <div class="todo">
                <h3>plain todo Line</h3>
                <div class="details">
                    <h3>Details</h3>
                    <div>
                        <p>Pro ea nonumy integre, mel at solum corpora. Id viris audiam repudiare cum, pri dolore appareat ex, per propriae detracto tacimates ex.
                            Elitr sapientem quo et, usu suas porro tibique cu. Iusto causae eos et, tota principes interesset et eos. Similique intellegam cum ei, unum
                            qualisque mel et, regione verterem delicatissimi qui ut. Aliquam incorrupte ea pro, vel veritus consequat id.</p>
                    </div>
                </div>
            </div>

            <div class="todo">
                <h3>plain todo Line</h3>
                <div class="details">
                    <h3>Details</h3>
                    <div>
                        <p>Pro ea nonumy integre, mel at solum corpora. Id viris audiam repudiare cum, pri dolore appareat ex, per propriae detracto tacimates ex.
                            Elitr sapientem quo et, usu suas porro tibique cu. Iusto causae eos et, tota principes interesset et eos. Similique intellegam cum ei, unum
                            qualisque mel et, regione verterem delicatissimi qui ut. Aliquam incorrupte ea pro, vel veritus consequat id.</p>
                    </div>
                </div>
            </div>

            <div class="todo">
                <a href="javascript:(void)"><h3>todo line with &lt;a&gt; click</h3></a>
                <div class="details">
                    <h3>Details</h3>
                    <div>
                        <p>Pro ea nonumy integre, mel at solum corpora. Id viris audiam repudiare cum, pri dolore appareat ex, per propriae detracto tacimates ex.
                            Elitr sapientem quo et, usu suas porro tibique cu. Iusto causae eos et, tota principes interesset et eos. Similique intellegam cum ei, unum
                            qualisque mel et, regione verterem delicatissimi qui ut. Aliquam incorrupte ea pro, vel veritus consequat id.</p>
                    </div>
                </div>
            </div>

        </div>
    </div>