Элементы Flex не равны ширине [дубликат]

Question

Элементы Flex не равны ширине [дубликат]

Прежде всего, всегда иметь эту строку перед подключением MySQLi во всех ваших средах:

mysqli_report(MYSQLI_REPORT_ERROR | MYSQLI_REPORT_STRICT);

После этого все ошибки MySQL будут перенесены в исключения PHP. Исключение, которое не доступно, в свою очередь, приводит к фатальной ошибке PHP. Таким образом, в случае ошибки MySQL вы получите обычную ошибку PHP. Это немедленно сообщит вам об ошибке. Трассировка стека приведет вас к тому месту, где произошла ошибка.

Обратите внимание, что вы должны уметь видеть ошибки PHP в целом. И здесь, действительно, речь идет о разных средах:

На реальном сайте вы должны заглядывать в журналы ошибок, поэтому настройки должны быть
```
error_reporting(E_ALL);
ini_set('display_errors', 0);
ini_set('log_errors', 1);
```
Во время включения локальный сервер разработки, это нормально делать ошибки на экране:
```
error_reporting(E_ALL);
ini_set('display_errors', 1);
```

И небольшой список того, что вы не должны:

Использовать подавление ошибок оператор [@)
Используйте die() или echo или любую другую функцию, чтобы безошибочно печатать сообщение об ошибке на экране. PHP может снова откликнуться, помощь не требуется.
Тестирование результата запроса вручную (например, if($result)) просто не имеет смысла. Или ваш запрос не удался, и вы уже получите исключение ошибки, или все было в порядке, и нет ничего, чтобы протестировать.
Использовать try..catch для эхо-сообщения об ошибке. Снова PHP может сделать это лучше, лучше.

34

css css3 flexbox

задан Michael_B 9 January 2016 в 15:24

5 ответов

Обновление 3:

Я выяснил еще один способ избавиться от несоосности.

Эта версия вместе с обновлением 2: nd , работает с оригинальным html нетронутым и использует псевдоэлементы для создания кнопок, включенных эффектов зависания кнопок / кликов.

flex только версия

.row {
  width: 60%;
  margin: auto;
  display: flex;
}
.button {
  flex: 0 0 33.3%;
  text-align: center;
  position: relative;
  padding: 10px 5px;
  box-sizing: border-box;
  pointer-events: none;
}
.button#number0 {
  flex: 0 0 66.6%;
}

.button:before,
.button:after {
  content: " ";
  border-radius: 5px;
  border: 1px solid gray;  
  cursor: pointer;
  position: absolute;
  left: 5px;
  top: 5px;
  right: 5px;
  bottom: 5px;
  pointer-events: auto;
}
.button:before {
  background: rgba(255, 255, 255, 0.9);
  z-index: -1
}
.button:hover:before {
  background: rgba(0, 0, 0, 0.1);
}
.button:hover:after {
  border: 2px solid red;
}
.button:active:before {
  background: rgba(255, 0, 0, 0.5);
}

<div class="numbers">
    <div class="row">
        <div class="button number" id="number1">1</div>
        <div class="button number" id="number2">2</div>
        <div class="button number" id="number3">3</div>
    </div>
    <div class="row">
        <div class="button number" id="number4">4</div>
        <div class="button number" id="number5">5</div>
        <div class="button number" id="number6">6</div>
    </div>
    <div class="row">
        <div class="button number" id="number7">7</div>
        <div class="button number" id="number8">8</div>
        <div class="button number" id="number9">9</div>
    </div>
    <div class="row">
        <div class="button number" id="number0">0</div>
        <div class="button" id="colon">:</div>
    </div>
</div>

flex версия с резервной копией display: table для браузеров, которая не поддерживает новую модель flexbox.

.row {
  display: table;              /* remove for flex only */
  width: 60%;
  margin: auto;
  display: flex;
}
.button {
  display:table-cell;          /* remove for flex only */
  width: 33.3%;                /* remove for flex only */
  flex: 0 0 33.3%;
  text-align: center;
  position: relative;
  padding: 10px 5px;
  box-sizing: border-box;
  pointer-events: none;
}
.button#number0 {
  width: 66.6%;                /* remove for flex only */
  flex: 0 0 66.6%;
}

.button:before,
.button:after {
  content: " ";
  border-radius: 5px;
  border: 1px solid gray;  
  cursor: pointer;
  position: absolute;
  left: 5px;
  top: 5px;
  right: 5px;
  bottom: 5px;
  pointer-events: auto;
}
.button:before {
  background: rgba(255, 255, 255, 0.9);
  z-index: -1
}
.button:hover:before {
  background: rgba(0, 0, 0, 0.1);
}
.button:hover:after {
  border: 2px solid red;
}
.button:active:before {
  background: rgba(255, 0, 0, 0.5);
}

<div class="numbers">
    <div class="row">
        <div class="button number" id="number1">1</div>
        <div class="button number" id="number2">2</div>
        <div class="button number" id="number3">3</div>
    </div>
    <div class="row">
        <div class="button number" id="number4">4</div>
        <div class="button number" id="number5">5</div>
        <div class="button number" id="number6">6</div>
    </div>
    <div class="row">
        <div class="button number" id="number7">7</div>
        <div class="button number" id="number8">8</div>
        <div class="button number" id="number9">9</div>
    </div>
    <div class="row">
        <div class="button number" id="number0">0</div>
        <div class="button" id="colon">:</div>
    </div>
</div>

Обновление 2:

В дополнение к ответу Michael_B, который, кстати, имеет очень хорошее объяснение, здесь обновленная версия, которая на самом деле дает желаемое выравнивание без в этом случае 1-2 пикселей.

Вот пример скрипта и изображение , как версий my, так и Michael_B, где граница была увеличена немного, чтобы было легче увидеть несоосность.

Все сводится к тому, как flexbox вычисляет размеры, когда border / padding который вы можете узнать больше в этом сообщении, , где box-sizing: border-box необходимо установить вместе с несколькими дополнительными настройками, которые комментируются в коде.

моя скрипка и фрагмент

.row {
    display: flex;
    width: calc(100% - 30px);   /* 30px = the sum of the buttons margin: 5px
                                          to avoid horizontal scroll            */
}

.button {
    display: flex;
    flex-basis: 33.33%;
    flex-shrink: 0;             /* we need flex-grow/shrink to be 1/0 to make
                                   it calculate the size properly               */
    box-sizing: border-box;     /* to take out the borders when calculate the 
                                   flex shrink/grow factor                      */
    justify-content: center;
    align-items: center;
    margin: 5px;
    border-radius: 5px;
    border: 1px solid gray;
    background: rgba(0, 0, 0, 0.1);
    cursor: pointer;
}

#number0 {
    flex-basis: calc(66.66% + 10px);
}

<div class="numbers">
    <div class="row">
        <div class="button number" id="number1">1</div>
        <div class="button number" id="number2">2</div>
        <div class="button number" id="number3">3</div>
    </div>
    <div class="row">
        <div class="button number" id="number4">4</div>
        <div class="button number" id="number5">5</div>
        <div class="button number" id="number6">6</div>
    </div>
    <div class="row">
        <div class="button number" id="number7">7</div>
        <div class="button number" id="number8">8</div>
        <div class="button number" id="number9">9</div>
    </div>
    <div class="row">
        <div class="button number" id="number0">0</div>
        <div class="button" id="colon">:</div>
    </div>
</div>

Обновление:

flex только версия с незначительным изменением существующей структуры html с использованием псевдоэлементов.

.row {
  display: flex;
}
.button {
  flex: 0 0 33.3%;
}
.button:after {
  content: attr(data-nr);
  display: block;
  border-radius: 5px;
  border: 1px solid gray;
  background: rgba(255, 255, 255, 0.9);
  text-align: center;
  padding: 3px;
  margin: 5px;
  cursor: pointer;
}
.button#number0 {
  flex: 0 0 66.6%;
}

<div class="numbers">
    <div class="row">
        <div class="button number" id="number1" data-nr="1"></div>
        <div class="button number" id="number2" data-nr="2"></div>
        <div class="button number" id="number3" data-nr="3"></div>
    </div>
    <div class="row">
        <div class="button number" id="number4" data-nr="4"></div>   
        <div class="button number" id="number5" data-nr="5"></div>
        <div class="button number" id="number6" data-nr="6"></div>
    </div>
    <div class="row">
        <div class="button number" id="number7" data-nr="7"></div>
        <div class="button number" id="number8" data-nr="8"></div>
        <div class="button number" id="number9" data-nr="9"></div>
    </div>
    <div class="row">
        <div class="button number" id="number0" data-nr="0"></div>
        <div class="button" id="colon" data-nr=":"></div>
    </div>
</div>

flex версия с незначительным изменением существующей структуры html, с использованием псевдоэлементов, и имеет резерв display: table для браузеров, который не поддерживает новую модель flexbox (например, IE8 / 9).

.row {
  display: table;
  width: 100%;
}
.button {
  display: table-cell;
  width: 33.3%;
  padding: 5px;
}
.button:after {
  content: attr(data-nr);
  display: block;
  border-radius: 5px;
  border: 1px solid gray;
  background: rgba(255, 255, 255, 0.9);
  text-align: center;
  padding: 3px;
  cursor: pointer;
}
.button#number0 {
  width: 66.6%;
}


@supports (display: flex) {
  .row {
    display: flex;
  }
  .button {
    display: block;
    width: auto;
    flex: 0 0 33.3%;
    padding: 0;
  }
  .button#number0 {
    flex: 0 0 66.6%;
  }
  .button:after {
    margin: 5px;
  }  
}

<div class="numbers">
    <div class="row">
        <div class="button number" id="number1" data-nr="1"></div>
        <div class="button number" id="number2" data-nr="2"></div>
        <div class="button number" id="number3" data-nr="3"></div>
    </div>
    <div class="row">
        <div class="button number" id="number4" data-nr="4"></div>   
        <div class="button number" id="number5" data-nr="5"></div>
        <div class="button number" id="number6" data-nr="6"></div>
    </div>
    <div class="row">
        <div class="button number" id="number7" data-nr="7"></div>
        <div class="button number" id="number8" data-nr="8"></div>
        <div class="button number" id="number9" data-nr="9"></div>
    </div>
    <div class="row">
        <div class="button number" id="number0" data-nr="0"></div>
        <div class="button" id="colon" data-nr=":"></div>
    </div>
</div>

10

ответ дан 15 revs 24 August 2018 в 09:48

Важно использовать стенографию для поддержки кросс-браузера:

.row {
    display: flex;
    flex-direction: row; /* <-- this is the default so unnecessary to state */
    flex-grow: 1;
    justify-content: space-between;
}

.button {
    display: flex;
   /* flex-grow: 1; replace with shorthand */ 
   flex:1 0 100%; /* probably making the "width: 100%;" unnecessary */
    justify-content: center;
}

.button#number0 {
    /* flex-grow: 2; replace with shorthand */ 
   flex:2 0 100%;
}

.button#colon {
    /* flex-grow: 1; replace with shorthand */ 
    flex:1 0 100%;
}

1

ответ дан Carol McKay 24 August 2018 в 09:48

1

– Lee Saxon 21 January 2016 в 08:51
2

– Carol McKay 21 January 2016 в 09:00
3

– LGSon 21 January 2016 в 09:52
4

– Carol McKay 21 January 2016 в 10:24

Я думаю, что все, что сказал Майкл_Б, верен. Только решения немного неудобны. Я лично не люблю вычислять. Это просто не так.

Проблема у вас более общая. Вы накладываете слишком много обязанностей на один элемент. В этом случае это класс .button. Flex и Margin с гибким ростом - это слишком большая ответственность. Попытайтесь разбить это. Это означает больше элементов DOM, но это сэкономит вам много боли.

.numbers {
  display: flex;
  flex-direction: column;
  max-width: 200px;
  margin: 0 auto;
}

.row {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  justify-content: space-between;
}

.row > .box {
  display: flex;
  flex-basis: 33.3333%;
  justify-content: center;
  align-items: center;
}

.row > .box.box-2 {
  flex-basis: 66.6667%;
}

.button {
  border-radius: 5px;
  border: 1px solid gray;
  background: rgba(255, 255, 255, 0.2);
  cursor: pointer;
  width: auto;
  text-align: center;
  margin: 5px;
  width: 100%;
}

<div class="numbers">
    <div class="row">
      <div class="box"><div class="button number" id="number1">1</div></div>
      <div class="box"><div class="button number" id="number2">2</div></div>
      <div class="box"><div class="button number" id="number3">3</div></div>
    </div>
    <div class="row">
      <div class="box"><div class="button number" id="number4">4</div></div>
      <div class="box"><div class="button number" id="number5">5</div></div>
      <div class="box"><div class="button number" id="number6">6</div></div>
    </div>
    <div class="row">
      <div class="box"><div class="button number" id="number7">7</div></div>
      <div class="box"><div class="button number" id="number8">8</div></div>
      <div class="box"><div class="button number" id="number9">9</div></div>
    </div>
    <div class="row">
      <div class="box box-2"><div class="button number" id="number0">0</div></div>
      <div class="box"><div class="button" id="colon">:</div></div>
        
        
    </div>
</div>

7

ответ дан HerrSerker 24 August 2018 в 09:48

flexbox не очень хорошо реагирует на поля.

Лучший подход / обходной путь, который я предпочитаю, состоит в том, чтобы убедиться, что все дети Flex имеют 0 полей, установите контейнер flex в justify-content: space-between;, а затем дать детям общую ширину менее 100%. Остальная часть будет вашей маржой.

Другими словами, если вам нужно два элемента в строке, установите каждый на 49% в ширину, и у вас будет 2% пространства между ними. Три элемента, каждый по 32% в ширину, и у вас будет 2% между ними. В примере калькулятора ячейка 0 должна быть 66%, а остальные 32%.

Изменить: обратите внимание, что, поскольку причины (а именно, что content-box ужасны), если у кого-либо из ваших детей есть границ, вам нужно будет использовать box-sizing: border-box для правильного работы моего предложения.

https://jsfiddle.net/r3L1mtbe/2/

4

ответ дан Lee Saxon 24 August 2018 в 09:48

Другие вопросы по тегам:

css css3 flexbox

Похожие вопросы:

score 27 · Accepted Answer

Кажется, что содержимое внутри гибкого div влияет на его расчетный размер относительно свойства flex-grow. Я делаю что-то неправильно?

Источником вашей проблемы является не содержимое внутри элемента flex.
В приведенной ниже скрипте вы увидите цифровую панель. Все строки содержат 3 номера, кроме нижней строки. Эта строка должна иметь «0» - это ширина из двух чисел, поэтому flex-grow: 2 и «:» должны быть размером 1, следовательно flex-grow: 1. Я что-то упустил?

Да. Ваша интерпретация свойства flex-grow неверна. flex-grow не предназначен для определения размера элемента гибкости. Его задача состоит в том, чтобы распределить свободное пространство в контейнере гибких контейнеров между элементами flex.

Применяя flex-grow: 1 к группе элементов гибкости, вы говорите им распределять свободное пространство равномерно между собой. Вот почему в вашей демонстрации строки 1, 2 и 3 имеют одинаковые размеры элементов гибкости.

Когда вы применяете flex-grow: 2, вы указываете, что элемент гибкости потребляет вдвое больше свободного места как элементы с flex-grow: 1. Это не обязательно означает, что элемент flex будет в два раза больше.

Кроме того, в вашем случае, даже если flex-grow: 2 означает в два раза больше размера, как бы он знал, чтобы включить этот второй 10px margin из строк выше в его вычисление ширины (что было бы необходимо для достижения выравнивание, которое вы хотите)?

Причина, по которой выравнивание отключена в строке четвертая, состоит в том, что она имеет только один маркер в 10 пикселей.

Вы заметите, что если вы удалите правило поля , вы получите желаемое выравнивание.
.numbers {
    display: flex;
    flex-direction: column;
}

.row {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    justify-content: space-between;
}

.button {
    display: flex;
    flex-grow: 1;
    justify-content: center;
    align-items: center;
    /* margin: 5px; */
    border-radius: 5px;
    border: 1px solid gray;
    background: rgba(255, 255, 255, 0.2);
    cursor: pointer;
}

.button#number0 {
    flex-grow: 2;
}

.button#colon {
    flex-grow: 1;
}
<div class="numbers">
    <div class="row">
        <div class="button number" id="number1">1</div>
        <div class="button number" id="number2">2</div>
        <div class="button number" id="number3">3</div>
    </div>
    <div class="row">
        <div class="button number" id="number4">4</div>
        <div class="button number" id="number5">5</div>
        <div class="button number" id="number6">6</div>
    </div>
    <div class="row">
        <div class="button number" id="number7">7</div>
        <div class="button number" id="number8">8</div>
        <div class="button number" id="number9">9</div>
    </div>
    <div class="row">
        <div class="button number" id="number0">0</div>
        <div class="button" id="colon">:</div>
    </div>
</div>
Итак, что происходит на четвертой строке с этим вторым краем 10px?

Он поглощается двумя элементами гибкости.
Вот как flex-grow распределяет дополнительное пространство в строке четвертое:

Элемент Flex слева (с содержимым «0») имеет flex-grow: 2. (.button#number0 в коде.)

Элемент элемента Flex (с содержимым «:») имеет flex-grow: 1. (.button#colon в коде.)

Второе поле между элементами, которое появляется только в строках с тремя элементами гибкости, имеет ширину 10 пикселей. (Код говорит 5px вокруг каждого элемента, но в CSS горизонтальные поля никогда не сжимаются . Кроме того, в flexbox никакие поля не сжимаются .)

Сумма общее значение flex-grow равно трем. Итак, давайте разделим 10px на 3. Теперь мы знаем, что доля 1 равна 3.33px.

Следовательно, левый элемент flex получает 6.66px дополнительного пространства, а элемент flex item получает 3.33px.

Предположим, что на левой стороне было отмечено flex-grow: 3. Затем гибкий элемент слева получит 7.5px, а flex item right получит 2.5px.

В последней части вашего вопроса говорится:
Правая сторона «0» должна быть выровнена с 8, 5 и 2 над ней.

Поскольку flex-grow не участвует непосредственно в настройках гибких элементов, вам понадобится другой метод.

Вместо этого попробуйте flex-basis. Это работает:
.button    { flex-basis: 33.33%; }
#number0   { flex-basis: calc(66.67% + 10px); }
.numbers {
    display: flex;
    flex-direction: column;
}

.row {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    justify-content: space-between;
}

.button {
    display: flex;
    flex-basis: 33.33%;
    justify-content: center;
    align-items: center;
    margin: 5px;
    border-radius: 5px;
    border: 1px solid gray;
    background: rgba(255, 255, 255, 0.2);
    cursor: pointer;
}

#number0 {
    flex-basis: calc(66.67% + 10px);
}
<div class="numbers">
    <div class="row">
        <div class="button number" id="number1">1</div>
        <div class="button number" id="number2">2</div>
        <div class="button number" id="number3">3</div>
    </div>
    <div class="row">
        <div class="button number" id="number4">4</div>
        <div class="button number" id="number5">5</div>
        <div class="button number" id="number6">6</div>
    </div>
    <div class="row">
        <div class="button number" id="number7">7</div>
        <div class="button number" id="number8">8</div>
        <div class="button number" id="number9">9</div>
    </div>
    <div class="row">
        <div class="button number" id="number0">0</div>
        <div class="button" id="colon">:</div>
    </div>
</div>
UPDATE

В ответ на обратную связь в комментариях, я сделал корректировку кода выше. Добавляя box-sizing: border-box, корректировка 1-2px исправляется.
.button    { flex-basis: 33.33%; box-sizing: border-box }
#number0   { flex-basis: calc(66.67% + 10px); }
.numbers {
    display: flex;
    flex-direction: column;
}

.row {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    justify-content: space-between;
}

.button {
    display: flex;
    flex-basis: 33.33%;
    justify-content: center;
    align-items: center;
    margin: 5px;
    border-radius: 5px;
    border: 1px solid gray;
    background: rgba(255, 255, 255, 0.2);
    cursor: pointer;
    box-sizing: border-box;
}

#number0 {
    flex-basis: calc(66.67% + 10px);
}
<div class="numbers">
    <div class="row">
        <div class="button number" id="number1">1</div>
        <div class="button number" id="number2">2</div>
        <div class="button number" id="number3">3</div>
    </div>
    <div class="row">
        <div class="button number" id="number4">4</div>
        <div class="button number" id="number5">5</div>
        <div class="button number" id="number6">6</div>
    </div>
    <div class="row">
        <div class="button number" id="number7">7</div>
        <div class="button number" id="number8">8</div>
        <div class="button number" id="number9">9</div>
    </div>
    <div class="row">
        <div class="button number" id="number0">0</div>
        <div class="button" id="colon">:</div>
    </div>
</div>
JSFIDDLE

Ссылки:

flex-grow определение ~ MDN

flex-basis определение ~ MDN

7.2 Компоненты гибкости ~ W3C