詳しい人求む！

cssのflexのレイアウトについてです

締切済

質問者：JosephWalden
質問日時：2019/09/25 00:20
回答数：2件

cssのflexのレイアウトについての質問です。

------------------------
|　　　|　　　　　　|
|　　　|　　　　　　|
|　　　|--------------
|　　　|　　　|　　　|
|　　　|　　　|　　　|
------------------------

縦2マス ☓ 横3マス
を
このようにしたレイアウトは
どうすればcssのflexで表現できますか？

<style type="text/css">

</style>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： gura_
回答日時：2019/09/25 16:37

JosephWaldenさん

>･････flexのレイアウト･････････

ご参考↓

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<html>
<head>
<style>
.box-flex { width:400px; height:150px; display:flex; border:1px solid #333; }
.box-flex div{ height:100%; }
.box1 { flex:1;}
.box2 { flex:2; display: flex; flex-flow:column nowrap; border-left:1px solid #333;}
.box21 { border-bottom:1px solid #333;}
.box22 { display:flex; }
.box221 { flex:1; }
.box221:last-child { border-left:1px solid #333;}
</style>
</head>
<body>
<div class="box-flex">
<div class="box1">1</div>
<div class="box2">
<div class="box21">21</div>
<div class="box22">
<div class="box221">221</div>
<div class="box221">222</div>
</div>
</div>
</div>
</body>
</html>

- 0
- 件

通報する

参考程度に

No.1

回答者： fujillin
回答日時：2019/09/25 10:06

こんにちは

方法はいくつもあると思いますが、いずれにしろ2段階の構成になりそうな気がします。
仮に、全部DIV要素で構成するとして…

【 HTML 】
<div class="box-flex">
<div>BOX 1</div>
<div>
<div>BOX 2</div>
<div>BOX 3</div>
<div>BOX 4</div>
</div>
</div>

レイアウトは、幅を親要素(.box-flex)に対する比率で指定する考え方です。
高さは、ひとまずまとめて「min-height:150px;」に設定してあります。

【 CSS 】
div { box-sizing:border-box; }
.box-flex, .box-flex>div { display:flex; flex-wrap:wrap; }
.box-flex div { flex-grow:1; min-height:150px; }
.box-flex>div:last-child { flex-grow:2; }
.box-flex>div>div:first-child { width:100%; }

/* 背景色と枠づけ */
.box-flex>div:first-child, .box-flex>div>div {
background-color:#DFD; border:1px solid gray;
}