Вопрос:

Нежелательное поле между флексбоксами при просмотре на мобильном телефоне

html css flexbox

39 просмотра

2 ответа

290 Репутация автора

На моей веб-странице возникла проблема, связанная с появлением полей рядом с флексбоксами при просмотре сайта на мобильном устройстве. Я разобрал проблему до довольно простого кода.

HTML-код

<html>
    <head>
        <link href="style.css" rel="stylesheet">
    </head>
    <body>

        <div class="container">
            <!-- When you remove this period, issue goes away -->
        .

            <div class="smallboxes">
                <div class="smallbox1">
                </div>
                <div class="smallbox2">
                </div>
            </div>

            <div class="bigbox">
            </div>

        </div>

    </body>
</html>

Код CSS

.container {
display: flex;
height: 100px;
}

.bigbox {
flex: 2;
background-color: #6e6e6e;
display: flex;
}

.smallboxes {
flex: 1;
display: flex;
flex-direction: column;
}

.smallbox1 {
flex: 2;
background-color: #6e6e6e;  
}

.smallbox2 {
flex: 1;
}

Когда вы запускаете код в Chrome, щелкните правой кнопкой мыши, нажмите «Проверить», просмотрите как IPad Pro в горизонтальном режиме и измените вид на 75% или 125%. Вы увидите белую линию между двумя полями. Это проявляется и в моем Note 5. Не должно быть никакой линии между двумя серыми квадратами.

Как я упоминаю в коде, когда вы удаляете точку, проблема исчезает.

Большое спасибо за помощь!

PS Я новичок в SO и, похоже, не могу понять, как вставить кнопку «запустить codepen on this code». Я включаю ссылку на версию этого кода.

http://codepen.io/jasonhoward64/pen/XMpYXJ

Автор: Jason Howard Источник Размещён: 09.03.2017 09:14

Ответы (2)


0 плюса

76 Репутация автора

редактировать: новый ответ на основе комментариев автора

Я играл с вашим Codepen, и проблема заключается в использовании "Flex: 1". Flex создает необходимое пространство внутри вашего «контейнера». если вы даете ".bigBox" flex: 2; и ".smallBoxes" flex: 1; он разделит «.container» на 3 части, где bigBox займет 2. Когда вы добавите элемент в контейнер, не задавая значение flex, он попытается вычислить необходимое пространство. Попробуйте поместить точку внутри span или div (или другого элемента) и присвойте ей значение flex. Это решит вашу проблему.

.container {
  display: flex;
  height: 100px;
  background: red
}

.bigbox {
  flex: 5;
  background-color: #6e6e6e;
  display: flex;
}

.testBox {
  background: yellow;
  flex: 1;
}

.smallboxes {
  flex: 3;
  display: flex;
  flex-direction: column;
}

.smallbox1 {
  flex: 2;
  background-color: #6e6e6e;	
}

.smallbox2 {
  flex: 1
}
<html>
  <head>
    <link href="style.css" rel="stylesheet">
  </head>
  <body>

    <div class="container">
      <!-- When you remove this period, issue goes away -->	<span class="testBox">test</span>
      <div class="smallboxes">
        <div class="smallbox1">
        </div>
        <div class="smallbox2">
        </div>
      </div>

      <div class="bigbox">
      </div>

    </div>

  </body>
</html>

Автор: M. Scheurwater Размещён: 09.03.2017 09:59

0 плюса

290 Репутация автора

Ваш код работает, но когда вы добавляете поле 0 в тело, оно снова ломается. Ты знаешь почему?

body {
margin: 0;
}

.container {
  display: flex;
  height: 100px;
  background: red
}

.bigbox {
  flex: 5;
  background-color: #6e6e6e;
  display: flex;
}

.testBox {
  background: yellow;
  flex: 1;
}

.smallboxes {
  flex: 3;
  display: flex;
  flex-direction: column;
}

.smallbox1 {
  flex: 2;
  background-color: #6e6e6e;	
}

.smallbox2 {
  flex: 1
}
<html>
  <head>
    <link href="style.css" rel="stylesheet">
  </head>
  <body>

    <div class="container">
      <!-- When you remove this period, issue goes away -->	<span class="testBox">test</span>
      <div class="smallboxes">
        <div class="smallbox1">
        </div>
        <div class="smallbox2">
        </div>
      </div>

      <div class="bigbox">
      </div>

    </div>

  </body>
</html>

Автор: Jason Howard Размещён: 11.03.2017 08:20
Вопросы из категории :
32x32