Flexboxでの等幅のアイテム配置

CSS3のflexboxを使ったスタイルで、要素を50pxずつの幅で区切っていくデザインを考えています。

完成図は次のようなものです。

コンテナ用にcontainerクラスを定義後、内側のアイテム用にitemクラスを定義しました。

アイテムの各要素のタグに幅を設定して作成しましたが、
より良い方法はないでしょうか？

ご助言いただけるとありがたいです。

html
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="utf-8" />
5<title>flexbox</title>
6<style>
7.container {
8  display: flex;
9  justify-content: center;
10  align-items: center;
11
12  border: 1px solid #1b0303;
13  width: 250px;
14  height: 250px;
15  margin: auto;
16}
17
18.item{
19  display: flex;
20  justify-content: center;
21  align-items: center;
22  background-color: azure;
23}
24</style>
25</head>
26<body>
27<div class="container">
28    <div class="item" style="width:200px;height:200px">
29        <div class="item" style="width:150px;height:150px;background-color: skyblue">
30            <p class="item" style="width:100px;height:100px;background-color: aquamarine">Text</p>
31        </div>            
32    </div>
33</div>
34</body>
35</html>

xjjojo

2019/05/14 06:12

CSSタグを追加すると回答が得られやすいと思います

t-cool

2019/05/14 06:46

ご助言ありがとうございます。CSSタグを追加しました。

xjjojo

2019/05/14 06:49

いえいえ～! いい方法がわかるといいですね(^_^)!

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

回答1件

ベストアンサー

質問者さんが実現したいことは、 calc 関数を用いることで実現できると思います(動作確認用リンク)。

HTML
1<div class="container">
2  <div class="item">
3    <div class="item" style="background-color: skyblue">
4      <p class="item" style="background-color: aquamarine">Text</p>
5    </div>
6  </div>
7</div>

CSS
1.container {
2  display: flex;
3  justify-content: center;
4  align-items: center;
5  border: 1px solid #1b0303;
6  width: 250px;
7  height: 250px;
8  margin: auto;
9}
10
11.item {
12  --box-size: calc(100% - 50px); /* 追加 */
13  display: flex;
14  justify-content: center;
15  align-items: center;
16  background-color: azure;
17  width: var(--box-size); /* 追加 */
18  height: var(--box-size); /* 追加 */
19}