Свойства эмуляции flexbox. Нужен совет

199
16 апреля 2017, 00:39

Хотелось бы услышать критику по существующей логике разметки.

display: table-cell применяется к дочерним элементам для того, чтобы эмулировать одинаковую высоту элементов в строке. На данный момент она работает только в режиме эмуляции свойства flex: 1 0 auto. И большинство свойств flex не описаны.

Зачем это нужно: эмуляция работы flex в старых браузерах. Часть функционала на JS пока не могу показать.

Пожалуйста, укажите слабые стороны разметки. Для того чтобы я мог понять — правильно ли я делаю?

https://jsfiddle.net/hxn38uzx/

* { 
  padding: 0; 
  margin: 0; 
  box-sizing: border-box; 
} 
 
html, 
body { 
  width: 100%; 
  height: 100%; 
  min-width: 240px; 
} 
 
body { 
  font-size: 62.5%; 
  /*10px*/ 
  letter-spacing: normal; 
  word-spacing: normal; 
  white-space: normal; 
  word-wrap: break-word; 
  background: #fff; 
} 
 
.g { 
  display: flex; 
  flex-wrap: wrap; 
  width: 100%; 
  border: .5em solid #d55; 
  margin: 0 0 .5em 0; 
} 
 
.c { 
  vertical-align: top; 
  border: .5em solid #c95; 
} 
 
.g, 
.c { 
  position: relative; 
  order: 1; 
  min-height: 0%; 
  min-width: 0%; 
  width: 100%; 
  max-width: 100%; 
  flex: 1 0 auto; 
} 
 
.noflex.g { 
  display: block; 
  border: .5em solid #d55; 
} 
 
.noflex>.c { 
  display: table-cell; 
  border: .5em solid #c95; 
  /* Магическая константа =) Уменьшать значение нельзя. В разных версиях IE по-разному обрезает знаки после запятой. Почему установлено именно такое значение можно узнать по ссылке https://toster.ru/q/416641 */ 
  /* Magic constant =) To decrease the value of it is impossible. In different versions of IE differently truncates the decimal places. Why it set such a value can be found at the link https://toster.ru/q/416641 */ 
  min-width: .01%; 
} 
 
 
/* Элемент с селектором '.b' добавляется для noflex-элементов с целью разорвать строку. Добавление происходит с помощью JS. */ 
 
 
/* Element with selector '.b' is added to noflex-elements in order to break the line. The addition happens using JS. */ 
 
.b { 
  width: 100%; 
  height: 0; 
  clear: both; 
} 
 
.w01 { 
  width: 8.33%; 
} 
 
.w02 { 
  width: 16.66%; 
} 
 
.w03 { 
  width: 25%; 
} 
 
.w04 { 
  width: 33.33%; 
} 
 
.w05 { 
  width: 41.66%; 
} 
 
.w06 { 
  width: 50%; 
} 
 
.w07 { 
  width: 58.33%; 
} 
 
.w08 { 
  width: 66.66%; 
} 
 
.w09 { 
  width: 75%; 
} 
 
.w10 { 
  width: 83.33%; 
} 
 
.w11 { 
  width: 91.66%; 
} 
 
.w12 { 
  width: 100%; 
} 
 
.noflex>.w01, 
.noflex.w01 { 
  width: .01%; 
} 
 
.noflex>.w02, 
.noflex.w02 { 
  width: .02%; 
} 
 
.noflex>.w03, 
.noflex.w03 { 
  width: .03%; 
} 
 
.noflex>.w04, 
.noflex.w04 { 
  width: .04%; 
} 
 
.noflex>.w05, 
.noflex.w05 { 
  width: .05%; 
} 
 
.noflex>.w06, 
.noflex.w06 { 
  width: .06%; 
} 
 
.noflex>.w07, 
.noflex.w07 { 
  width: .07%; 
} 
 
.noflex>.w08, 
.noflex.w08 { 
  width: .08%; 
} 
 
.noflex>.w09, 
.noflex.w09 { 
  width: .09%; 
} 
 
.noflex>.w10, 
.noflex.w10 { 
  width: .10%; 
} 
 
.noflex>.w11, 
.noflex.w11 { 
  width: .11%; 
} 
 
.noflex>.w12, 
.noflex.w12 { 
  width: .12%; 
}
<div> 
  <h1>Flex</h1> 
</div> 
<div class="g"> 
  <div class="c w06">c w06</div> 
  <div class="c w02">c w02</div> 
  <div class="c w03">c w04 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
    irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> 
  <div class="c w01">c w01</div> 
</div> 
 
 
<div> 
  <h1>NoFlex</h1> 
</div> 
<div class="g noflex"> 
  <div class="c w06">c w06</div> 
  <div class="c w02">c w02</div> 
  <div class="c w03">c w04 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
    irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> 
  <div class="c w01">c w01</div> 
</div> 
 
 
<div> 
  <h1>Flex</h1> 
</div> 
<div class="g"> 
  <div class="c w01">c w01</div> 
  <div class="c w01">c w01</div> 
  <div class="c w01">c w01</div> 
  <div class="c w01">c w01</div> 
  <div class="c w01">c w01</div> 
  <div class="c w01">c w01</div> 
  <div class="c w01">c w01</div> 
  <div class="c w01">c w01</div> 
  <div class="c w01">c w01</div> 
  <div class="c w01">c w01</div> 
  <div class="c w01">c w01</div> 
  <div class="c w01">c w01</div> 
 
  <div class="c w02">c w02</div> 
  <div class="c w02">c w02</div> 
  <div class="c w02">c w02</div> 
  <div class="c w02">c w02</div> 
  <div class="c w02">c w02</div> 
  <div class="c w02">c w02</div> 
 
  <div class="c w03">c w03</div> 
  <div class="c w03">c w03</div> 
  <div class="c w03">c w03</div> 
  <div class="c w03">c w03</div> 
 
  <div class="c w04">c w04</div> 
  <div class="c w04">c w04</div> 
  <div class="c w04">c w04</div> 
 
  <div class="c w05">c w05</div> 
  <div class="c w05">c w05</div> 
  <div class="c w02">c w02</div> 
 
  <div class="c w06">c w06</div> 
  <div class="c w06">c w06</div> 
 
  <div class="c w07">c w07</div> 
  <div class="c w05">c w05</div> 
 
  <div class="c w08">c w08</div> 
  <div class="c w04">c w04</div> 
 
  <div class="c w09">c w09</div> 
  <div class="c w03">c w03</div> 
 
  <div class="c w10">c w10</div> 
  <div class="c w02">c w02</div> 
 
  <div class="c w11">c w11</div> 
  <div class="c w01">c w01</div> 
 
  <div class="c w12">c w12</div> 
</div> 
 
 
<div> 
  <h1>NoFlex</h1> 
</div> 
<div class="g noflex"> 
  <div class="c w01">c w01</div> 
  <div class="c w01">c w01</div> 
  <div class="c w01">c w01</div> 
  <div class="c w01">c w01</div> 
  <div class="c w01">c w01</div> 
  <div class="c w01">c w01</div> 
  <div class="c w01">c w01</div> 
  <div class="c w01">c w01</div> 
  <div class="c w01">c w01</div> 
  <div class="c w01">c w01</div> 
  <div class="c w01">c w01</div> 
  <div class="c w01">c w01</div> 
 
  <div class="b"></div> 
 
  <div class="c w02">c w02</div> 
  <div class="c w02">c w02</div> 
  <div class="c w02">c w02</div> 
  <div class="c w02">c w02</div> 
  <div class="c w02">c w02</div> 
  <div class="c w02">c w02</div> 
 
  <div class="b"></div> 
 
  <div class="c w03">c w03</div> 
  <div class="c w03">c w03</div> 
  <div class="c w03">c w03</div> 
  <div class="c w03">c w03</div> 
 
  <div class="b"></div> 
 
  <div class="c w04">c w04</div> 
  <div class="c w04">c w04</div> 
  <div class="c w04">c w04</div> 
 
  <div class="b"></div> 
 
  <div class="c w05">c w05</div> 
  <div class="c w05">c w05</div> 
  <div class="c w02">c w02</div> 
 
  <div class="b"></div> 
 
  <div class="c w06">c w06</div> 
  <div class="c w06">c w06</div> 
 
  <div class="b"></div> 
 
  <div class="c w07">c w07</div> 
  <div class="c w05">c w05</div> 
 
  <div class="b"></div> 
 
  <div class="c w08">c w08</div> 
  <div class="c w04">c w04</div> 
 
  <div class="b"></div> 
 
  <div class="c w09">c w09</div> 
  <div class="c w03">c w03</div> 
 
  <div class="b"></div> 
 
  <div class="c w10">c w10</div> 
  <div class="c w02">c w02</div> 
 
  <div class="b"></div> 
 
  <div class="c w11">c w11</div> 
  <div class="c w01">c w01</div> 
 
  <div class="b"></div> 
 
  <div class="c w12">c w12</div> 
</div> 
 
 
<div> 
  <h1>Flex</h1> 
</div> 
<div class="g"> 
  <div class="c w07">c w07</div> 
  <div class="c w09">c w09</div> 
</div> 
 
 
<div> 
  <h1>NoFlex</h1> 
</div> 
<div class="g noflex"> 
  <div class="c w07">c w07</div> 
 
  <div class="b"></div> 
 
  <div class="c w09">c w09</div> 
</div>

Flex 
<div class="g">
    <div class="c w06">c w06</div>
    <div class="c w02">c w02</div>
    <div class="c w03">c w04 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    <div class="c w01">c w01</div>
</div>

<div>
    <h1>NoFlex</h1>
</div>
<div class="g noflex">
    <div class="c w06">c w06</div>
    <div class="c w02">c w02</div>
    <div class="c w03">c w04 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    <div class="c w01">c w01</div>
</div>

<div>
    <h1>Flex</h1>
</div>
<div class="g">
    <div class="c w01">c w01</div>
    <div class="c w01">c w01</div>
    <div class="c w01">c w01</div>
    <div class="c w01">c w01</div>
    <div class="c w01">c w01</div>
    <div class="c w01">c w01</div>
    <div class="c w01">c w01</div>
    <div class="c w01">c w01</div>
    <div class="c w01">c w01</div>
    <div class="c w01">c w01</div>
    <div class="c w01">c w01</div>
    <div class="c w01">c w01</div>
    <div class="c w02">c w02</div>
    <div class="c w02">c w02</div>
    <div class="c w02">c w02</div>
    <div class="c w02">c w02</div>
    <div class="c w02">c w02</div>
    <div class="c w02">c w02</div>
    <div class="c w03">c w03</div>
    <div class="c w03">c w03</div>
    <div class="c w03">c w03</div>
    <div class="c w03">c w03</div>
    <div class="c w04">c w04</div>
    <div class="c w04">c w04</div>
    <div class="c w04">c w04</div>
    <div class="c w05">c w05</div>
    <div class="c w05">c w05</div>
    <div class="c w02">c w02</div>
    <div class="c w06">c w06</div>
    <div class="c w06">c w06</div>
    <div class="c w07">c w07</div>
    <div class="c w05">c w05</div>
    <div class="c w08">c w08</div>
    <div class="c w04">c w04</div>
    <div class="c w09">c w09</div>
    <div class="c w03">c w03</div>
    <div class="c w10">c w10</div>
    <div class="c w02">c w02</div>
    <div class="c w11">c w11</div>
    <div class="c w01">c w01</div>
    <div class="c w12">c w12</div>
</div>

<div>
    <h1>NoFlex</h1>
</div>
<div class="g noflex">
    <div class="c w01">c w01</div>
    <div class="c w01">c w01</div>
    <div class="c w01">c w01</div>
    <div class="c w01">c w01</div>
    <div class="c w01">c w01</div>
    <div class="c w01">c w01</div>
    <div class="c w01">c w01</div>
    <div class="c w01">c w01</div>
    <div class="c w01">c w01</div>
    <div class="c w01">c w01</div>
    <div class="c w01">c w01</div>
    <div class="c w01">c w01</div>
    <div class="b"></div>
    <div class="c w02">c w02</div>
    <div class="c w02">c w02</div>
    <div class="c w02">c w02</div>
    <div class="c w02">c w02</div>
    <div class="c w02">c w02</div>
    <div class="c w02">c w02</div>
    <div class="b"></div>
    <div class="c w03">c w03</div>
    <div class="c w03">c w03</div>
    <div class="c w03">c w03</div>
    <div class="c w03">c w03</div>
    <div class="b"></div>
    <div class="c w04">c w04</div>
    <div class="c w04">c w04</div>
    <div class="c w04">c w04</div>
    <div class="b"></div>
    <div class="c w05">c w05</div>
    <div class="c w05">c w05</div>
    <div class="c w02">c w02</div>
    <div class="b"></div>
    <div class="c w06">c w06</div>
    <div class="c w06">c w06</div>
    <div class="b"></div>
    <div class="c w07">c w07</div>
    <div class="c w05">c w05</div>
    <div class="b"></div>
    <div class="c w08">c w08</div>
    <div class="c w04">c w04</div>
    <div class="b"></div>
    <div class="c w09">c w09</div>
    <div class="c w03">c w03</div>
    <div class="b"></div>
    <div class="c w10">c w10</div>
    <div class="c w02">c w02</div>
    <div class="b"></div>
    <div class="c w11">c w11</div>
    <div class="c w01">c w01</div>
    <div class="b"></div>
    <div class="c w12">c w12</div>
</div>

<div>
    <h1>Flex</h1>
</div>
<div class="g">
    <div class="c w07">c w07</div>
    <div class="c w09">c w09</div>
</div>

<div>
    <h1>NoFlex</h1>
</div>
        <div class="g noflex">
    <div class="c w07">c w07</div>
    <div class="b"></div>
    <div class="c w09">c w09</div>
</div>
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
html, body {
    width: 100%;
    height: 100%;
    min-width: 240px;
}
body {
    font-size: 62.5%; /*10px*/

    letter-spacing: normal;
    word-spacing: normal;
    white-space: normal;
    word-wrap: break-word;
    background: #fff;
}

.g {
    display: flex;
    flex-wrap: wrap;
    width: 100%;

    border: .5em solid #d55;
    margin: 0 0 .5em 0;
}
.c {
    vertical-align: top;
    border: .5em solid #c95;
}
.g, .c {
    position: relative;
    order: 1;
    min-height: 0%;
    min-width: 0%;
    width: 100%;
    max-width: 100%;
    flex: 1 0 auto;
}

.noflex.g {
    display: block;
    border: .5em solid #d55;
}
.noflex > .c {
    display: table-cell;
    border: .5em solid #c95;
    /* Магическая константа =) Уменьшать значение нельзя. В разных версиях IE по-разному обрезает знаки после запятой. Почему установлено именно такое значение можно узнать по ссылке https://toster.ru/q/416641 */
    /* Magic constant =) To decrease the value of it is impossible. In different versions of IE differently truncates the decimal places. Why it set such a value can be found at the link https://toster.ru/q/416641 */
    min-width: .01%;
}

/* Элемент с селектором '.b' добавляется для noflex-элементов с целью разорвать строку. Добавление происходит с помощью JS. */
/* Element with selector '.b' is added to noflex-elements in order to break the line. The addition happens using JS. */
.b {
    width: 100%;
    height: 0;
    clear: both;
}

.w01 {width: 8.33%;}
.w02 {width: 16.66%;}
.w03 {width: 25%;}
.w04 {width: 33.33%;}
.w05 {width: 41.66%;}
.w06 {width: 50%;}
.w07 {width: 58.33%;}
.w08 {width: 66.66%;}
.w09 {width: 75%;}
.w10 {width: 83.33%;}
.w11 {width: 91.66%;}
.w12 {width: 100%;}

.noflex > .w01, .noflex.w01 {width: .01%;}
.noflex > .w02, .noflex.w02 {width: .02%;}
.noflex > .w03, .noflex.w03 {width: .03%;}
.noflex > .w04, .noflex.w04 {width: .04%;}
.noflex > .w05, .noflex.w05 {width: .05%;}
.noflex > .w06, .noflex.w06 {width: .06%;}
.noflex > .w07, .noflex.w07 {width: .07%;}
.noflex > .w08, .noflex.w08 {width: .08%;}
.noflex > .w09, .noflex.w09 {width: .09%;}
.noflex > .w10, .noflex.w10 {width: .10%;}
.noflex > .w11, .noflex.w11 {width: .11%;}
.noflex > .w12, .noflex.w12 {width: .12%;}
READ ALSO
CSS маска объектов
CSS

CSS маска объектов

Доброго утра! Каким образом из верхнего блока с такой разметкой:

 193
Где может быть ошибка в скрипте?
CSS

Где может быть ошибка в скрипте?

Добрый день! На странице есть ссылки, расположенные в одну строкуЭтот скрипт прячет ссылки, которые при ресайзе выходят за пределы экрана,...

 192
Растянуть DIV по высоте родителя
CSS

Растянуть DIV по высоте родителя

Ребят, как растянуть все DIVы по высоте родителя при условии:

 274
Картинка как фон панели в Swing
Java

Картинка как фон панели в Swing

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

 178