Как исправить ширину и границу элемента в CSS flexbox - PullRequest
Новая
       40

Как исправить ширину и границу элемента в CSS flexbox

0 голосов
/ 07 мая 2020

enter image description here

Изображение говорит само за себя - левый элемент имеет требуемый стиль границы при разной ширине окна браузера, правый элемент в той же строке имеет квадратную границу по ширине окна браузера ~ 1751px, в то время как нижний элемент (то есть .rightcolumn) полностью растянут, а верхний правый угол закруглен, а не два нижних. Перепробовал практически все комбинации коробочных моделей без результата ...

Вот index.html код: 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="cache-control" content="must-revalidate" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />
<meta charset="UTF-8" />
<title>Test</title>
<link rel='stylesheet' type='text/css' href='style.css'>
</head>
<body>
  <div id='wrapper'>
    <div id='content'>
            <div id='sites'>
                <div id="leftcolumn" class='column leftcolumn'></div>
        <div id="middlecolumn" class='column middlecolumn'></div>
        <div id="rightcolumn" class='column rightcolumn'></div>
            </div>
    </div>
  </div>
</body>
</html>

А вот style.css код: 

* {
  box-sizing: border-box;
}

/* the following media queries change the column corners based on the current width of the browser window */
@media (max-width: 1392px) {
  .middlecolumn {
    border-top-right-radius: 1.5em !important;
  }

  .rightcolumn {
    border-top-right-radius: 0 !important;
    border-bottom-left-radius: 1.5em !important;
    border-bottom-right-radius: 1.5em !important;
  }
}

@media (max-width: 702px) {
  .leftcolumn {
    border-top-right-radius: 1.5em !important;
  }

  .middlecolumn {
    border-top-right-radius: 0em !important;
  }
}

html {
  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  font-size: 1rem;
  color: #FFFFFF;
  text-align: center;
  background: url("space.jpg") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 100%; /* fix for android devices */
  /* overflow: hidden; */ /* fix for android devices, currently disabled for desktops */
}

body {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-content: center;
  align-items: center;
}

#sites {
  display: flex;
  flex-flow: row wrap; /* row wrap set elements to follow each other as in row and to wrap when the browser is resized */
  justify-content: center;
  align-content: center;
  align-items: stretch;
  flex: 1;
  box-orient: vertical;
  box-align: center;
  box-pack: center;
  box-lines: multiple;
}

.column {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-content: center;
  align-items: center;
  padding-left: 0.1em;
  padding-right: 0.1em;
  margin: 0 1em;
  border: 2px solid #bfdfff;
  background-color: rgba(0, 0, 0, 0.90);
}

/* The following three classes set the column borders when the browser window is min 1392px wide */
.leftcolumn {
  border-top-left-radius: 1.5em;
}

.middlecolumn {
  /* no rounded corners */
  border-top-right-radius: 0;
}

.rightcolumn {
  border-top-right-radius: 1.5em;
}

И это скрипка: https://jsfiddle.net/539to64f/1/, где в 3-м столбце включен радиус нижней границы, в то время как он находится в той же строке с первыми двумя столбцами. Возможно, что-то о том, как jsfiddle обрабатывает окно вывода, но точно не знаю ...

...