【CSS】このデザインはCSSで実装できますか？

お世話になります。

下記のようにコーディングしたいと考えています。

CSSで実現できないか考えましたが、思いつきません。

ボーダーを背景画像で表現する
before 、after の疑似要素を利用する
flexboxの利用
data属性の利用など

おそらく、CSSだけでは難しく、jQueryなどを利用しないと難しいと思いますが、CSSで実現する方法があれば教えてくださいm(__)m

<html>
<head>
<title>test</title>
</head>
<style>
.wrapper {
    width: 600px;
    display: flex;
    flex-wrap: wrap;
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
    position: relative;
    background: #333;
}
.item {
    width: 200px;
    padding: 15px;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    box-sizing: border-box;
    display: flex;
    background: #fff;
}
.item_inner {
    width: 100%;
}
.item_title {
    background: red;
    margin: 0;
}
.item_tag {
    background: blue;
    margin: 0;
}
.item_data {
    background: green;
}
</style>
<body>
<div class="wrapper">

    <div class="item">
        <div class="item_inner">
            <p class="item_title">あああああああああああああああああああああああああ</p>
            <ul class="item_tag">
                <li>tag1</li>
                <li>tag2</li>
                <li>tag3</li>
            </ul>
            <div class="item_data">0000.00.00</div>
        </div>
    </div>

    <div class="item active">
        <div class="item_inner">
            <p class="item_title">いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい</p>
            <ul class="item_tag">
                <li>tag1</li>
                <li>tag2</li>
                <li>tag3</li>
                <li>tag4</li>
                <li>tag5</li>
                <li>tag6</li>
            </ul>
            <div class="item_data">0000.00.00</div>
        </div>
    </div>

    <div class="item">
        <div class="item_inner">
            <p class="item_title">ううううううう</p>
            <ul class="item_tag">
                <li>tag1</li>
                <li>tag2</li>
                <li>tag3</li>
            </ul>
            <div class="item_data">0000.00.00</div>
        </div>
    </div>

    <div class="item">
        <div class="item_inner">
            <p class="item_title">ええええええええええええええ</p>
            <ul class="item_tag">
                <li>tag1</li>
                <li>tag2</li>
                <li>tag3</li>
            </ul>
            <div class="item_data">0000.00.00</div>
        </div>
    </div>

    <div class="item">
        <div class="item_inner">
            <p class="item_title">おおおおおおおおおおおおおおおおおおお</p>
            <ul class="item_tag">
                <li>tag1</li>
                <li>tag2</li>
                <li>tag3</li>
            </ul>
            <div class="item_data">0000.00.00</div>
        </div>
    </div>

    <div class="item">
        <div class="item_inner">
            <p class="item_title">かかかかかかかかかかかかかかかかかかかかかかかかかかかかかかかかかかかか</p>
            <ul class="item_tag">
                <li>tag1</li>
                <li>tag2</li>
                <li>tag3</li>
            </ul>
            <div class="item_data">0000.00.00</div>
        </div>
    </div>

</div>

</body>
</html>

yambejp

2018/06/14 09:13

「あいう」は縦いっぱい赤いですが、「えお」は文字のところだけ赤いです。どちらかに統一しないと根拠があいまいです

退会済みユーザー

2018/06/14 09:19

失礼しました。画像作成したときにミスしました。「えお」も上の3段と同様に赤くしたいです。（正確には赤くしたいというよりは、位置を揃えたいです。背景色はわかりやすくするために付けました。）

退会済みユーザー

2018/06/14 09:23

ご指摘の画像を修正しました。

wrep

2018/06/14 09:52

item_tagの中のリストの個数は変動するのですよね？（もしそうなら今の回答は理想の状態を維持できないものだと思いますが）

退会済みユーザー

2018/06/14 09:58

仰るとおり、変動する予定です。今、試していますが変動するとピッタリとは揃わなそうですね。

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

回答1件

ベストアンサー

flex-grow, flex-shrink, flex-basis の指定でいいかと思いますがどうでしょうか？
(数値は適当)

CSS
1.item_inner {
2  display: flex;
3  flex-direction: column;
4}
5
6.item_inner > .item_title {
7  flex: 10;
8}
9
10.item_inner > .item_tag {
11  flex: 10;
12}
13
14.item_inner > .item_data {
15  flex: 1;
16}