如何在更改浏览器大小的同时使flex元素之间的空间保持不变
[英]How to make spaces between flex elements stay still in the same position while changing size of the browser
问题描述
I have a project: Codepen 
我有一个项目： Codepen
When I change browser size the letters climb to each other. 当我更改浏览器大小时，字母会相互攀升。
I need to find the way to lock the spaces between them. 我需要找到一种方法来锁定它们之间的空间。 The letters has to be done like it is, I mean polygon. 字母必须照原样完成，我的意思是多边形。 What to do to implant the letters to the divs, and has always the same spaces between them? 如何将字母植入div，并且它们之间始终有相同的空格？
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.flexContainer {
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
position: relative;
background: pink;
}
.letsPlay {
display: flex;
height: 50%;
width: 50%;
border: 2px solid red;
flex-wrap: wrap;
}
#lFirstLine {
position: relative;
background: lightgreen;
height: 50%;
width: 25%;
}
#eFirstLine {
position: relative;
background: green;
height: 50%;
width: 25%;
}
#tFirstLine {
position: relative;
background: lightgreen;
height: 50%;
width: 25%;
}
#sFirstLine {
position: relative;
background: green;
height: 50%;
width: 25%;
}
#pSecondLine {
position: relative;
background: CornflowerBlue;
width: 20%;
height: 50%;
}
#lSecondLine {
position: relative;
background: blue;
width: 20%;
height: 50%;
}
#aSecondLine {
position: relative;
background: CornflowerBlue;
width: 20%;
height: 50%;
}
#ySecondLine {
position: relative;
background: blue;
width: 20%;
height: 50%;
}
#exclamationMarkSecondLine {
position: relative;
background: CornflowerBlue;
width: 20%;
height: 50%;
}
.lFirst {
position: absolute;
background: black;
}
.lFirst.square {
right: 42px;
bottom: 7px;
height: 24px;
width: 24px;
transform: rotate(-45deg);
}
.lFirst.parallelogram {
right: 17px;
bottom: 1px;
height: 24px;
width: 24px;
transform: skew(-45deg);
}
.lFirst.triangleSmall1 {
right: 55px;
bottom: 1px;
height: 16.92px;
width: 33.84px;
clip-path: polygon(0% 100%, 100% 100%, 50% 0%);
}
.lFirst.triangleSmall2 {
right: -7px;
bottom: -2px;
height: 16.92px;
width: 33.84px;
transform: rotate(135deg);
clip-path: polygon(0% 100%, 100% 100%, 50% 0%);
}
.lFirst.triangleMiddle {
right: 57px;
bottom: 86px;
height: 24px;
width: 48px;
transform: rotate(-45deg);
clip-path: polygon(0% 100%, 100% 100%, 50% 0%);
}
.lFirst.triangleBig1 {
right: 39px;
bottom: 19px;
height: 33.84px;
width: 67.68px;
transform: rotate(90deg);
clip-path: polygon(0% 100%, 100% 100%, 50% 0%);
}
.lFirst.triangleBig2 {
right: 38px;
bottom: 54px;
height: 33.84px;
width: 67.68px;
transform: rotate(-90deg);
clip-path: polygon(0% 100%, 100% 100%, 50% 0%);
}
.e {
position: absolute;
background: black;
}
.e.square {
right: 51px;
bottom: 36px;
height: 24px;
width: 24px;
transform: rotate(-90deg);
}
.e.parallelogram {
right: 32px;
bottom: 75px;
height: 24px;
width: 24px;
transform: skew(-45deg);
}
.e.triangleSmall1 {
right: 69px;
bottom: 41px;
height: 16.92px;
width: 33.84px;
transform: rotate(270deg);
clip-path: polygon(0% 100%, 100% 100%, 50% 0%);
}
.e.triangleSmall2 {
right: 8px;
bottom: -3px;
height: 16.92px;
width: 33.84px;
transform: rotate(135deg);
clip-path: polygon(0% 100%, 100% 100%, 50% 0%);
}
.e.triangleMiddle {
right: 20px;
bottom: 0px;
height: 24px;
width: 48px;
transform: rotate(-180deg);
clip-path: polygon(0% 100%, 100% 100%, 50% 0%);
}
.e.triangleBig1 {
right: 49px;
bottom: -5px;
height: 33.84px;
width: 67.68px;
transform: rotate(225deg);
clip-path: polygon(0% 100%, 100% 100%, 50% 0%);
}
.e.triangleBig2 {
right: 49px;
bottom: 70px;
height: 33.84px;
width: 67.68px;
transform: rotate(-45deg);
clip-path: polygon(0% 100%, 100% 100%, 50% 0%);
}
</style>
</head>
<body>
<div class="flexContainer">
<div class=letsPlay>
<div id=lFirstLine>
<div class="lFirst square"></div>
<div class="lFirst parallelogram"></div>
<div class="lFirst triangleSmall1"></div>
<div class="lFirst triangleSmall2"></div>
<div class="lFirst triangleMiddle"></div>
<div class="lFirst triangleBig1"></div>
<div class="lFirst triangleBig2"></div>
</div>
<div id=eFirstLine>
<div class="e square"></div>
<div class="e parallelogram"></div>
<div class="e triangleSmall1"></div>
<div class="e triangleSmall2"></div>
<div class="e triangleMiddle"></div>
<div class="e triangleBig1"></div>
<div class="e triangleBig2"></div>
</div>
<div id=tFirstLine></div>
<div id=sFirstLine></div>
<div id=pSecondLine></div>
<div id=lSecondLine></div>
<div id=aSecondLine></div>
<div id=ySecondLine></div>
<div id=exclamationMarkSecondLine></div>
</div>
</div>
2 个解决方案
解决方案1
0 2017-09-19 15:31:13
Because the width on .letsPlay is a percentage, the boxes containing the letters will continue to shrink with the browser, and the letters will eventually push together. 因为.letsPlay上的宽度是百分比，所以包含字母的框将随着浏览器继续缩小，并且字母最终将推在一起。
To fix this, try a width of 500px or something similar on your .letsPlay element. 要解决此问题，请在.letsPlay元素上尝试使用500px的宽度或类似的宽度。 Unfortunately, you'll need another solution if you want all your letters to fit in on devices thinner than 500px. 不幸的是，如果您希望所有字母都适合小于500px的设备，则需要另一种解决方案。
解决方案2
0 2017-09-19 15:36:06
you can hard code a width in, instead of with a %. 您可以硬编码宽度，而不用％。 Change it from width-right: 500% to width-right: 500px - or whatever you want it to be 将其从width-right: 500%更改为width-right: 500px或任何您想要的width-right: 500px
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.