liタグの高さ幅を100%にしたまま二段にして横並びさせたい

件名の通りのことを実現しようとして
以下のようなHTML,CSSを書きました.liタグの数は不定です.

HTML
1<div id=“space”>
2	<ul>
3		<li>
4		</li>
5	</ul>
6</div>

CSS
1div{
2	width:100vw;
3	height:100vh;
4}
5ul{
6	display:flex;
7	flex-flow: column wrap;
8	width:100%;
9	height:100%;
10}
11li{
12	transform: scale(0.45, 0.45);
13	transform-origin: 5% 5%;
14	margin-right: -50%;
15	margin-bottom: -50%;
16	width:100%;
17	height:100%;
18}

transform: scale(0.45, 0.45);
を指定してliタグの幅,高さ100%を保ったままサイズを縮小しているのですが,
これだとpaddingもmarginも指定していないにも拘らず
要素に隙間が出てきてしまいます.
この隙間をなくすためにmarginでマイナス%を充てて対応しているわけですが,
そうすると
レスポンシブ（windowのリサイズ）によってはli要素が重なったり,二段にならず
一列で並んだりしてしまいます.
それを考慮しようと,media queriesを使用すると cssが複雑になってしまうので避けたいです.
また,li要素の両端にpaddingを使用せず隙間を空けたいです.
なのでmarginでマイナスの指定は,最後の手段にしたいのですが,以上の問題解決は可能でしょうか.
何か案があれば教えていただきたいです.

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

回答2件

ベストアンサー

質問文からはどうしたいのか読み取れなかったのですが、nekora さんのもので正しいのであれば、グリッドレイアウトにすることで li を100%にできます。

CSS
1body {
2  margin: 0;
3}
4
5div {
6  width: 100%;
7  height: 100vh;
8}
9
10ul {
11  display: grid;
12  grid-template-rows: repeat(2, 1fr);
13  grid-auto-flow: column;
14  margin: 0;
15  padding: 0;
16  list-style: none;
17  height: 100%;
18}
19
20li {
21  width: 100%;
22  height: 100%;
23}

https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Grid_Layout

投稿2020/04/07 07:31

x_x

総合スコア13749

nekora

2020/04/07 09:40

完璧ですね。ナイス回答だと思います。質問者がFLEXを使ってたのでFLEXにこだわりがあるのかと思い、 FLEXを使ってましたがGridレイアウトなら、こんな風に完璧な回答になるのですね。勉強になりました。高評価付けさせていただきます。

hanamo

2020/04/22 02:51

問題を整理出来ていなかったことと,質問内容が具体的にならないように心がけていたことが合間って,要領を得ない質問になってしまいました.申し訳ありません. やりたいことを実現できました.ありがとうございます! liの高さ,幅を25%のように指定できなかったのは,コンテンツ(画像や文字等)を画面一杯にした時と縮小した場合で同じ状態を保ちたかったからでした.100%から25%などとすると画像が隠れてしまうわけです.(今更ですが)

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

こんな感じでいいですか？

html
1<!DOCTYPE html>
2<html>
3<head>
4<meta  charset="UTF-8">
5<title>test</title>
6<style>
7div{
8    width:100vw;
9    height:100vh;
10}
11ul{
12    display:flex;
13    flex-direction:column;
14    flex-flow: column wrap;
15    width:100%;
16    height:100%;
17    margin: 0;/*user-agentが入れる分を明示的にキャンセル*/
18    padding: 0;/*user-agentが入れる分を明示的にキャンセル*/
19    list-style: none;
20}
21li{
22    height:50%;
23}
24</style>
25    
26</head>
27<body>
28<div id="space">
29    <ul>
30        <li>a
31        </li>
32        <li>b
33        </li>
34        <li>c
35        </li>
36        <li>d
37        </li>
38        <li>e
39        </li>
40        <li>f
41        </li>
42    </ul>
43</div>
44</body>
45</html>