68410


flex-
boxを使ってサイズがバラバラな二つの箱があった場合、中にあるboxにどちらも干渉せず、ちょうど真ん中にborderラインを引きたい場合どうしたら良いでしょうか？

**html**

[code]

    <div class="flex-box">
      <div class="red-box"></div>
      <div class="yellow-box"></div>
    </div>
    
[/code]

**css**

[code]

    .flex-box {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .red-box {
        height: 500px;
        width: 400px;
        margin-right: 10px;
        background-color: red;
    }
    .yellow-box {
        height: 200px;
        width: 300px;
        margin-left: 10px;
        background-color: yellow;
    }
    
[/code]

**やったこと**  
・真ん中に新しい `div` タグを作ってcssで `hieght: 100%` でborderラインを `1px` でやって見た

※注意 `.red-box` に `border-light: solid 1px;` 、 `.yellow-box`に `border-left:
solid 1px;` は線の長さが固定できないので使用できません。親要素のflex-boxの高さに合わせて線が引きたいです。

よろしくお願いいたします。

[![Flex-
Boxの画像](https://i.stack.imgur.com/XsNUB.png)](https://i.stack.imgur.com/XsNUB.png)


CC BY-SA 4.0
2020-07-08T09:22:36.963
68408
2020-07-09T11:06:42.633
2020-07-09T11:06:42.633
32986
34541
question
html css
Flexboxで中に二つのボックスがある場合、どちらのボックスに干渉せず真ん中に線を引きたい


flex コンテナの
[`::before`](https://developer.mozilla.org/ja/docs/Web/CSS/::before),
[`::after`](https://developer.mozilla.org/ja/docs/Web/CSS/::after)
疑似要素で[絶対配置](https://developer.mozilla.org/ja/docs/Web/CSS/position)を使い、 flex
コンテナに対する[相対配置](https://developer.mozilla.org/ja/docs/Web/CSS/position)を行うことで、質問者さんのやりたいことが実現出来ます。

[code]

    .flex-box {
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }
    
    .red-box {
      height: 500px;
      width: 400px;
      margin-right: 10px;
      background-color: red;
    }
    
    .yellow-box {
      height: 200px;
      width: 300px;
      margin-left: 10px;
      background-color: yellow;
    }
    
    .flex-box::before {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      height: 100%;
      width: 2px;
      background: blue;
      content: "";
    }
[/code]

[code]

    <div class="flex-box">
      <div class="red-box"></div>
      <div class="yellow-box"></div>
    </div>
[/code]


CC BY-SA 4.0
2020-07-08T11:07:54.833
68410
2020-07-08T11:07:54.833
32986
68408
answer


supaさんをのcssを元に少し調べて見たのですが、画面全体を分けたいときはsupaさんのcssを、flexのcontenerの中だけを真ん中に分けたいときは自分のcssをお使いください。`align-
self:stretch;`で子要素のboxに何もなくてもいっぱいまで広がってくれるみたいです。みなさんありがとうございました。supaさん、本当にありがとうございます。

[code]

    .line-box {
        content: "";
        width: 1px;
        align-self:stretch;
        background-color: gray;
    }
    
[/code]

※注意: このcssは、htmlファイルの`.red-box`と`.yellow-box`の間に`<div class="line-
box></div>`を追加したものです。


CC BY-SA 4.0
2020-07-09T04:04:59.223
68423
2020-07-09T04:04:59.223
34541
68408
answer