Вопросы Теги

Как центрировать блоки на странице при выравнивании влево с помощью css flexbox [duplicate]

100% относится к базовому размеру шрифта, который, если вы его не установили, будет пользовательским агентом браузера по умолчанию.

Чтобы получить эффект, который вам нужен, я бы использовал кусок javascript для настройки размера базового шрифта относительно размеров окна.

13
задан Oriol 25 January 2016 в 16:32
поделиться

2 ответа

Вы не можете. По умолчанию элементы inline-block имеют ширину усадки :

Ширина усадки для соответствия: min(max(preferred minimum width, available width), preferred width).

Затем,

  • Когда preferred minimum width <= preferred width <= available width, ширина будет preferred width по вашему желанию.
  • Когда available width <= preferred minimum width <= preferred width, ширина будет preferred minimum width по вашему желанию.
  • Когда preferred minimum width <= available width <= preferred width, ширина будет available width, даже если вам это не нравится.

Если вы действительно этого не хотите, я думаю, вы могли бы добавить слушателя событий resize с JS и вручную установить желаемую ширину.

15
ответ дан amn 18 August 2018 в 12:13
поделиться
  • 1
    То же самое относится к поплавкам и гибким предметам ... правильно? – Paulie_D 25 January 2016 в 16:47
  • 2
    @Paulie_D Да, поплавки также используют ширину усадки для соответствия (на самом деле она определена для них). И в основном все ядерные ящики inline-уровня делают то же самое. – Oriol 25 January 2016 в 17:11
  • 3
    Спасибо ... это тоже мое понимание. Странно, что это еще не решено ... Кажется, это общий запрос дизайна. – Paulie_D 25 January 2016 в 17:12
  • 4
    @Paulie_D Возможно, это намеренно, чтобы избежать резких изменений ширины и возможных круговых определений. Но было бы неплохо иметь это в не проблематичных случаях. – Oriol 25 January 2016 в 17:21
  • 5
    @Paulie_D BTW, гибкие элементы используют max-content вместо fit-content / shrink-to-fit. Я сам ответил . Если гибкий элемент переполняет контейнер flex вместо того, чтобы ломать линии? , чтобы объяснить это. – Oriol 26 January 2016 в 01:44
Элементы

inline-block не могут достичь этого макета - как продемонстрировано @Oriol, но

CSS Grid может достичь этого макета. 

body {
  margin: 0;
}

ul {
  display: inline-grid;
  grid-template-columns: repeat(auto-fit, 100px);
  min-width: 50vw;
  
  /* decorative properties */
  grid-gap: 10px;
  padding: 0;
  list-style: none;
  border: 5px solid salmon;
  box-sizing: border-box;
  
  /* center the grid */ 
  position: relative;
  left: 50vw;
  transform: translateX(-50%);
}
li {
  background-color: lightblue;
  height: 100px;
}
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
  <li>13</li>
  <li>14</li>
  <li>15</li>
  <li>16</li>
  <li>17</li>
  <li>18</li>
  <li>19</li>
  <li>20</li>
  <li>21</li>
  <li>22</li>
</ul>

Codepen demo (обязательно измените размер)

В основном соответствующий код сводится к следующему: 

ul {
  display: inline-grid; /* (1) */
  grid-template-columns: repeat(auto-fit, 100px); /* 100px = column width - (2) */
  min-width: 50vw; /* or any user-defined min-width (3) */
}

1) Сделайте контейнерный контейнер контейнером в виде сетки. Это заставит сетку «обрезать» содержимое, чтобы ширина сетки никогда не была более широкой, чем ее содержимое.

2) Установите сетку с адаптивной компоновкой (значение auto-fill / auto-fit используется для гибких макетов). Если нет места в строке для соответствия следующему элементу - он переносится в следующую строку.

Когда адаптивный макет используется вместе с встроенной сеткой - ширина сетки будет равна ширине одной элемент сетки. (когда ширина ширины / min-ширина явно не установлена ​​- , как это )

3) Установите контейнер с минимальной шириной, которая представляет (не более - один частичный элемент меньше, чем ) желаемая максимальная ширина для контейнера.

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

Если, однако, минимальная ширина точно не соответствует ширине элементов 'n' тем, что она также входит в часть n + 1-го элемента - в этом случае сетка будет слегка расширяться до точности установите n + 1-й элемент - с переносом n + 2-го элемента в следующую строку.

1
ответ дан Danield 18 August 2018 в 12:13
поделиться