3

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

html

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

css

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

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

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

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

Flex-Boxの画像

2 件の回答 2

3

flex コンテナの ::before, ::after 疑似要素で絶対配置を使い、 flex コンテナに対する相対配置を行うことで、質問者さんのやりたいことが実現出来ます。

.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: "";
}
<div class="flex-box">
  <div class="red-box"></div>
  <div class="yellow-box"></div>
</div>

1
  • supaさんありがとうございます! なるほどそうするんですね...。なかなか難しいですね。 Commented 2020年7月9日 1:53
0

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

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

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

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。