Как сделать чтоб flexbox заработал на google chrome?

Question

[sunnyrio]

Создал flexbox контейнер а также блоки внутри него, почему на firefox работает а на google chrome нет?
Сам код:

<DIV class="flex_menu_container">
      <DIV class="flex_menu_blocknull">&nbsp</DIV>
      <DIV class="flex_menu_block"><FONT class="flex_menu_font">Главная и каталог</FONT></DIV>
      <DIV class="flex_menu_block"><FONT class="flex_menu_font">О нас</FONT></DIV>
      <DIV class="flex_menu_block"><FONT class="flex_menu_font">Доставка и оплата</FONT></DIV>
      <DIV class="flex_menu_block"><FONT class="flex_menu_font">Контакты</FONT></DIV>
      <DIV class="flex_menu_blocknull">&nbsp</DIV>
    </DIV>

CSS:

.flex_menu_font
{
  color:white;
  font-size:20px;
  font-weight:300;
  font-family:AntiquaBold, sans-serif;
  line-height:25px;
  padding: 0px 0px 0px 30px;
}
.flex_menu_container
{
    display:flex;

position:fixed;left:50%;margin-left:-408px;z-index:999;
height: 30px;
width: 800px;
flex-direction: row;
justify-content: center;
align-items: flex-start;
  background: #507299;
  border: 3px solid black;
}
.flex_menu_block
{
height: 30px;
flex-basis: auto;
flex-grow: 2;
margin: auto;
  background: #507299;
}
.flex_menu_blocknull
{
height: 30px;
flex-basis: auto;
flex-grow: 2;
margin: auto;
  background: #507299;
}
.flex_menu_block:hover
{
background-color: #81BEF7;
font-color: white;
}

FireFox:


Google Chrome:

Comments

[0leg5ergeev]

flexboxin5.com

[0leg5ergeev]

хотя не очень понятно чем в данном случае не устраивает inline-block

Answer 1

[Сергей delphinpro]

В хроме флексы работают. А у вас, похоже, просто стили закэшированы. F12 - Network - Disable cache - F5

Comments

[sunnyrio]

нету галки в таком пункте

[Kovalsky]

Тогда нажимайте Ctrl+F5 или Shift+F5

[Сергей delphinpro]

sunnyrio: как это нет? O_O исключительно из интереса - у вас какая версия хрома и какая ОС на компьютере?

[Сергей delphinpro]

sunnyrio: ну до этой настройки еще так можно добраться: (F12 - F1)

[sunnyrio]

Версия 54.0.2840.99 m (64-bit) / OS- Windows 7

[Сергей delphinpro]

sunnyrio: =) у меня такая же. опция есть. странно..

[sunnyrio]

Никита Полевой: Cntrl+F5 помогло а что это за комбинация в гуглхроме?

[Kovalsky]

Сергей: вероятно, парень смотрит в консоль, а не в network

sunnyrio: обновление страницы без кеша

[Сергей delphinpro]

sunnyrio: ctrl+F5 - это комбинация в любом браузере.

Answer 2

[zooks]

1. Теги в HTML принято писать строчными буквами.
2. Меню нужно делать через маркированные списки ul - li
3. Тег font является устаревшим и не рекомендуется к использованию.
4. В CSS нужно делать отступы. Каждое новое правило с новой строки. Иначе эту кашу даже рассматривать не хочется.

Answer 3

[GreatRash]

Посмотрел на ваш код, возникли вопросы:

1) Доктайп прописан?
2) Почему все теги капсом?
3) Почему используете устаревший <font>?
4) Для чего нужны blocknull?

Comments

[sunnyrio]

1)Доктайп не прописан я не вкурсе что это
2)Это такое правописание
3)А что за новый font?
4)blocknull для боковых скрытых пунктов меню чтобы они не подсвечивались при наведении курсора

[Артем Каюн]

FONT рядом с flexbox...мощно!)

[GreatRash]

sunnyrio: Пройдите этот туториал для начала - www.w3schools.com/html/html_intro.asp. Вы пока вообще верстать не умеете.

[sunnyrio]

Артем Каюн: а что не так?

[Kovalsky]

sunnyrio: font устарел еще во времена Иешуа, а flex - одна из новых фишек

[sunnyrio]

Никита Полевой: и чем сейчас font заменяют?

[Артем Каюн]

Чтобы расставить все по местам и получить базовые знания, действительно, пройдите один из многочисленных курсов
https://www.codecademy.com/
https://htmlacademy.ru/

[Kovalsky]

sunnyrio: применением одноимённого CSS правила

[sunnyrio]

Артем Каюн: так как ты мне предлагаешь font заменить?

[Артем Каюн]

sunnyrio: Ну например span использовать, а в css font-family и прочее.

[Артем Каюн]

sunnyrio: Или вообще выкинуть тег font и ничем его не заменять, он там не нужен.

[sunnyrio]

Артем Каюн: и как тогда управлять отступом в блоке div? Чтобы текст был как сейчас по центру блока?

[Артем Каюн]

sunnyrio: text-align: center - горизонтальное выравнивание
line-height: 30px - выронит по вертикали текст, в вашем случае

[sunnyrio]

Артем Каюн: Эти свойства применить к блоку DIV?

[Артем Каюн]

sunnyrio: Да. И все что у вас для FONT задано, тоже в DIV применить

[sunnyrio]

Артем Каюн: А для чего тогда Font применяется если и без него обойтись можно?

[Артем Каюн]

sunnyrio: На заре html это был стандартный тег для форматирования текста. С развитием css необходимость в нем отпала. Сейчас он устарел и не рекомендуется к применению.
С помощью css вы можете стилизовать любой тег, хоть div, хоть ul. html используется для создания структуры страница, а css для стилизации. И не нужно их смешивать.

[sunnyrio]

Артем Каюн: Ясно, спасибо тебе