Flex с круглыми кнопками в ряд - PullRequest
Новая
       28

Flex с круглыми кнопками в ряд

1 голос
/ 16 июня 2019

Мой макет страницы такой Web-Page Высота делится на 3 части: top, middle, bottom

Я хочу, чтобы страница соответствовала высоте и ширине устройства на 100%, чтобы не было полос прокрутки по высоте или ширине

Прямо сейчас я делаю 

#top {
...
height: 10%;
...
}

#middle {
...
height: 80%;
...
}

#bottom {
...
height: 10%;
...
}

И это прекрасно работает по высоте

Теперь я пытаюсь разделить часть bottom по горизонтали, чтобы на изображении было 3 зеленых элемента - 2 круга по бокам и квадратный элемент посередине

И вот здесь я изо всех сил пытаюсь понять, как заставить это работать, поэтому у меня есть 2 вопроса:

  1. Поскольку высота страницы будет динамической, bottom будет иметь разной высоты. Если высота 1000px - снизу будет быть 100px , круги должны иметь height: 100px; width: 100px; border-radius: 50%;. Если высота 500px , должно быть height: 50px; width: 50px; border-radius: 50%;. Есть ли способ сделать его динамичным?
  2. Для разбиения страницы на top, middle, bottom, я использую простое height свойство CSS, но для строки bottom, разбитой на 3 Я использую flex, так как это кажется лучше. Есть ли способ больше предпочтительнее, чем другие? Должен ли я просто использовать heigth и width, или я должен использовать flex для всей страницы?

Ответы [ 3 ]

1 голос
/ 16 июня 2019

блок vh break все еще проблемы на мобильных телефонах. Вы можете использовать js, чтобы исправить проблему с помощью нескольких простых строк. 

    .my-element {

высота: 100vh; / * Откат для браузеров, которые не поддерживают пользовательские свойства * / высота: calc (var (- vh, 1vh) * 100); } 

// First we get the viewport height and we multiple it by 1% to get a value for a vh unit

let vh = window.innerHeight * 0.01; // Затем мы устанавливаем значение в пользовательском свойстве --vh в корень документа document.documentElement.style.setProperty ('- vh', ${vh}px);

подробности здесь (учебник) введите описание ссылки здесь

1 голос
/ 16 июня 2019

Если использование сетки является опцией, ниже следует сделать работу довольно хорошо: 

html,
body {
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.grid {
  display: grid;
  grid-template-rows: 10% auto 10%;
  grid-template-columns: 1fr;
  height: 100vh;
  width: 100vw;
}

.header {
  background: yellow;
}

.wrapper {
  background: red;
}

.footer {
  background: blue;
  display: grid;
  grid-template-columns: calc(100vh / 10) auto calc(100vh / 10);
  
  height: 100%;
}

.footer .circle {
  border-radius: 50%;
  background: lightgray;
  height: 100%;
  width: 100%;
}

.footer .block {
  background: purple;
  height: 100%;
  width: 100%;
}
<div class="grid">
  <div class="header">

  </div>
  <div class="wrapper">

  </div>
  <div class="footer">
    <div>
      <div class="circle">&nbsp;</div>
    </div>
    <div>
      <div class="block">&nbsp;</div>
    </div>
    <div>
      <div class="circle">&nbsp;</div>
    </div>
  </div>
</div>
0 голосов
/ 16 июня 2019

Используя display flex, вы можете использовать это: 

*{
    padding: 0;
    margin: 0;
}

.flex-container{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}

.header{
    background-color: #4273f8;
    width: 100vw;
    height: 10vh;
}

.main{
    background-color: #0044ff;
    width: 100vw;
    height: 80vh
}

.footer{
    background-color: #4273f8;
    width: 100vw;
    height: 10vh;
}

.footer .footer-container{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;
    height: 100%;
}

.circle-left{
    width: 5%;
    height: 100%;
    background-color: #00ff62;
    border-radius: 50%;
    margin: 0 .2em;
}

.footer-center{
    width: 100%;
    height: 100%;
    background-color: #00ff62;
}

.circle-right{
    width: 5%;
    height: 100%;
    background-color: #00ff62;
    border-radius: 50%;
    margin: 0 .2em;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Flex with round buttons in a row</title>
</head>
<body>
    <div class="flex-container">
        <header class="header">
            
        </header>
        <main class="main">

        </main>
        <footer class="footer">
            <div class="footer-container">
                <div class="circle-left">

                </div>
                <div class="footer-center">

                </div>
                <div class="circle-right">
                    
                </div>
            </div>
        </footer>
    </div>
</body>
</html>
...