flex-growをflex-wrap:wrapに適用したい

一つだけ拡大したいのですがflex-wrap:wrapだと厳しいのでしょうか？
よろしくお願いします。

[CodePen]
https://codepen.io/anon/pen/rKQmNa

行動規範の内容に同意します

回答3件

質問者さんが実現したいことは、以下のように行えるかと思いますが、いかがでしょうか？

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <style>
7        * {
8            padding: 0;
9            margin: 0;
10        }
11
12        .items {
13            width: 100%;
14            height: 100vh;
15            background-color: red;
16            display: flex;
17            flex-flow: row;
18            flex-wrap: wrap;
19        }
20
21        .item {
22            --item-width: 33%;
23            background-color: green;
24            border: 1px black solid;
25            box-sizing: border-box;
26            width: var(--item-width);
27            align-content: flex-start;
28        }
29
30        .item:nth-child(5) {
31            background-color: blue;
32            flex-basis: calc(100% - var(--item-width));
33        }
34    </style>
35</head>
36<body>
37<div class="items">
38    <div class="item">
39        <h1>jioji</h1>
40    </div>
41    <div class="item">
42        <h1>jioji</h1>
43    </div>
44    <div class="item">
45        <h1>jioji</h1>
46    </div>
47    <div class="item">
48        <h1>jioji</h1>
49    </div>
50    <div class="item">
51        <h1>jioji</h1>
52    </div>
53    <div class="item">
54        <h1>jioji</h1>
55    </div>
56    <div class="item">
57        <h1>jioji</h1>
58    </div>
59    <div class="item">
60        <h1>jioji</h1>
61    </div>
62    <div class="item">
63        <h1>jioji</h1>
64    </div>
65    <div class="item">
66        <h1>jioji</h1>
67    </div>
68</div>
69</body>
70</html>

投稿2018/06/28 10:28

s8_chu

総合スコア14731

私ならこうしちゃうかな。

CSS
1<style>
2* {
3padding: 0;
4margin: 0;
5}
6
7.items {
8width: 100%;
9height: 100vh;
10background-color: red;
11display: flex;
12flex-direction: row; /* 注1 */
13flex-wrap: wrap;
14}
15
16.item {
17width: 33.3333%; 
18width: calc(100% / 3); /* 注2 */
19background-color: green;
20border: 1px black solid;
21box-sizing: border-box;
22align-content: flex-start;
23}
24
25.item:nth-child(5) {
26width: 66.6666%; 
27width: calc(calc(100% /3) * 2); /* 注3 */
28background-color: blue;
29}
30</style>

※注1…
flex-flowは、flex-directionとflex-wrapのショートハンドなので、下でflex-wrapを個別指定してるならこちらもflex-directionと個別指定に揃えておいたほうが読みやすい。もしくは2つまとめて flex-flow: row wrap;としておくとか。

※注2…
アイテム幅をキッチリ1/3にしたいならcalc()を使うと良いです。
widthではなく、flex-basisで指定してもOK。

※注3…
css変数使うとIE11で効かないので、calc()の入れ子で2/3幅を計算してます。
widthではなく、flex-basisで指定してもOK。

flexboxの場合、複数行の途中でセル結合的な感覚で「ここから端まで引き伸ばす」みたいな指定は仕様的にできないと思うので、何らかの方法で幅を指定してそれっぽく見せるしかないかと。
厳密に質問者さんがやりたいレイアウトを作るなら、flexboxじゃなくてCSS Gridの方が適切だと思われます。

投稿2018/07/02 03:09

aKusano

総合スコア3763

推測ですがこう言うことですか？　･･･勘違いしていたらスミマセン･･･

CSS
1.item:nth-child(5) {
2  background-color: blue;
3  width:66%;　/* 100%を「.item」2こ分に変更*/
4}

投稿2018/07/02 02:50

yoshinavi

総合スコア3523

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

flex-growをflex-wrap:wrapに適用したい

関連した質問