Строка Flexbox отображается в виде столбца в режиме конструктора VS2015 Update 3 - PullRequest
0 голосов
/ 21 мая 2019

Я работаю в Visual Studio 2015 обновление 3. Я пытаюсь использовать Flexbox Display: Flex; создать простой ряд блоков, которые уменьшаются при уменьшении ширины экрана.

Используя следующий код, он выглядит хорошо, как и ожидалось, работает в любом браузере.

Однако в конструктивном представлении VS2015 контейнер Div представляет собой блок на экране, а внутренний блок Div отображается в виде столбца.

Сначала я работал над ним на странице .aspx, но затем я попробовал простую страницу .html, хотя и в среде VS2015. Я искал по всей сети и переполнял стек за последние три дня, но не нашел проблем, похожих на мою проблему. Я начинаю думать, что это еще одна ошибка VS. У меня есть только Visual Studio в качестве дизайнера, я не знаю, так ли это во всех дизайнерах или редакторах кода.

CSS:

.flex-container {
    display: flex;
    flex-flow: row wrap;
    background-color: DodgerBlue;
    }

.flex-container > div {
    background-color: #f1f1f1;
    width: 100px;
    margin: 10px;
    text-align: center;
    line-height: 75px;
    font-size: 30px;
    }
<div class="flex-container">
    <div>1</div>
    <div>2</div>
    <div>3</div>  
    <div>4</div>
    <div>5</div>
    <div>6</div>  
    <div>7</div>
    <div>8</div>
    <div>9</div>  
    <div>10</div>
    <div>11</div>
    <div>12</div>  
</div>

Я бы ожидал увидеть ряд белых коробок на синем фоне. Если ширина будет слишком узкой для всех белых прямоугольников, я ожидаю увидеть их перенос на следующую строку (в режиме конструктора). Спасибо за любые предложения, подтверждения, примеры или решения. :)

...