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