Все технические форумы на одном сайте Удобный поиск информации с популярных форумов в одном месте
Вопрос: Flexbox в Safari 5.1.7

Всем привет.

Использую flexbox для выравнивания элементов списка по центру:

<ul>
	<li><a href="#">Новости</a></li>
	<li><a href="#">Блоги</a></li>
	<li><a href="#">Контакты</a></li>						
</ul>

ul
{
	display: flex;
	justify-content: center;
	list-style: none;
	overflow: hidden;	
}
li
{
	float: left;
}


Так вот в Сафари 5.1.7 на Windows 8.1 нефига не работает.
В инете полно инфы, но похоже, она касается, либо более поздних версий Сафари, либо мобильных версий.
Т.к. ни один из способов, которые я пробовал, не работает.

Везде пишут про префиксы -webkit для сафари - не работает!
А добавление display: -webkit-box вообще приводит к исчезновению элемента со страницы.
Т.е. он после этого перестает отображаться (в Сафари).
Добавление других -webkit просто ни к чему не приводит.

Может кто подскажет пути решения?
Поддержка Сафари 5.1.7 нужна, у заказчика он стоит основным браузером.
Заранее спасибо!
Ответ: Ну то, что он не поддерживает flexbox я и так знаю ))
Ладно, спасибо. Это у меня сафари 5.1. на винде.
У заказчика мак, а значит, там должна стоять последняя версия сафари по идее.
А на ней должно все работать.

Спасибо!
Вопрос: Выравнивание во Flexbox

Выравнивание во Flexbox.

Как опустить кнопку в низ блока?
Ответ: Если уж сетка на флексе, то обходимся без позиционирования:
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8" />
  <title>Document</title>
  <style>
    .list {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      height: 300px;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
    }
 
    .list__item {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      text-align: center;
      border: 1px solid black;
      padding: 10px;
      box-sizing: border-box;
      -webkit-box-flex: 0;
          -ms-flex: 0 200px;
              flex: 0 200px;
    }
 
    .list__content {
      -webkit-box-flex: 1;
          -ms-flex: 1;
              flex: 1;
    }
 
    .list__user-logo img {
      display: inline-block;
      border: 4px solid green;
      border-radius: 50%;
      width: 100px;
      height: 100px;
    }
 
    .list__user-prof {
      display: block;
    }
  </style>
</head>
 
<body>
  <div class="wrapper">
    <div class="list">
      <div class="list__item">
        <div class="list__content">
          <div class="list__user-logo">
            <img />
          </div>
          <span class="list__user-name">Mahmoud Baghagho Mahmoud Baghagho</span>
          <span class="list__user-prof">Senior UI Designer</span>
        </div>
        <div class="list__button">
          <button>Follow</button>
        </div>
      </div>
      <div class="list__item">
        <div class="list__content">
          <div class="list__user-logo">
            <img />
          </div>
          <span class="list__user-name">Mahmoud Baghagho</span>
          <span class="list__user-prof">Senior UI Designer</span>
        </div>
        <div class="list__button">
          <button>Follow</button>
        </div>
      </div>
      <div class="list__item">
        <div class="list__content">
          <div class="list__user-logo">
            <img />
          </div>
          <span class="list__user-name">Mahmoud Baghagho Mahmoud Baghagho</span>
          <span class="list__user-prof">Senior UI Designer</span>
        </div>
        <div class="list__button">
          <button>Follow</button>
        </div>
      </div>
      <div class="list__item">
        <div class="list__content">
          <div class="list__user-logo">
            <img />
          </div>
          <span class="list__user-name">Mahmoud Baghagho</span>
          <span class="list__user-prof">Senior UI Designer</span>
        </div>
        <div class="list__button">
          <button>Follow</button>
        </div>
      </div>
    </div>
  </div>
</body>
 
</html>
Вопрос: botstrap 4 flexbox

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

<header class="row">
          <h1 class="col-md-6">
            <div class="logo col-md-2"><img src="../img/logo.png"></div>
            <div class="col-md-10 clearfix"><a href="#" class="logo_href"><span>DuckFiles.com</span></a><span class="h5">Free resources for web designers</span></div>
          </h1>
          <div class="search col-md-6">
            <div class="input-group col-md-6 pull-right">
              <input id="search" type="text" placeholder="Search for..." class="form-control"><span class="input-group-btn">
                <button type="button" class="btn btn-default srch-btn"><i class="fa fa-search"></i></button></span>
            </div>
          </div>
        </header>


разметка в стандартной сетке, когда блоки выравниваются через float выглядит вот так


как только я включаю flexbox разметка ломается



это что получается нужно самому стили для сетки прописывать?
Ответ: Забей на этот бутстреп, почитай доки и пропиши сам, тогда точно поймешь почему именно так.
Вопрос: Как сделать 50% высоты у дочерних блоков, с помощью flexbox?

Добрый день!

Как с помощью flexbox сделать такую конструкцию?

<div class="wrapper"><!-- Высота этого контейнера неизвестна -->
    <div class="column"><!-- Этот, должен быть 100% высоты своего ↑ родителя -->
        <div class="cell"></div><!-- Один под другим. 50% высоты -->
        <div class="cell"></div><!-- Один под другим. 50% высоты -->
    </div>
</div>
Ответ:
Сообщение от snovapavel
Как сделать 50% высоты у дочерних блоков, с помощью flexbox?
можно также у дочерних элементов flex-grow: 1;

<!DOCTYPE html>
<html>
<head>
<style>
.wrapper {
	height: 200px;
}
.column {
    height: 100%;
    display: flex;
    flex-direction: column;
    outline: 3px solid green;
}
.cell {
    flex-grow: 1;
    background: orange;
}
.cell:last-child {
    background: tan;
}
  
</style>
</head>
<body>
  <div class="wrapper"><!-- Высота этого контейнера неизвестна -->
      <div class="column"><!-- Этот, должен быть 100% высоты своего ↑ родителя -->
          <div class="cell">1</div><!-- Один под другим. 50% высоты -->
          <div class="cell">2</div><!-- Один под другим. 50% высоты -->
      </div>
  </div>
</body>
</html>
Вопрос: Flexbox и перенос блоков в safari?

Добрый вечер!
Первый опыт верстки с использованием flexbox. Очень понравилось, писаю кипятком Но у нас же не может быть все просто. IE, не беда, сделал элементы inline-block (кстати, если inline-block прописать в основном style.css, то safari ругается на flexbox) и выставил нужный margin. А вот с safari как бороться не знаю.
Проблема заключается в переносе элементов при сужении окна браузера (при уменьшении разрешения экрана)
- пример кода.
HTML5
1
2
3
4
5
6
7
8
9
<div class="wrap">
  <ul class="box-list">
    <li class="box-item"></li>
    <li class="box-item"></li>
    <li class="box-item"></li>
    <li class="box-item"></li>
    <li class="box-item"></li>
  </ul>
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
.wrap{
  width:600px;
}
.box-list{
    list-style:none;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-flow: row wrap;
        -ms-flex-flow: row wrap;
            flex-flow: row wrap;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between;
}
.box-item{
  width:100px;
  height:100px;
  background:#ccc;
  margin:0 0 20px;
  display:block;
}
Все браузеры молодцы, скидывают непоместившийся блок вниз и поехали дальше, но safari уменьшает лишь ширину между блоками и в последствии появляется прокрутка.
Буду благодарен за любую помощь!
Ответ: Достаточно использовать свойство, которое поддерживают все современные браузеры: flex-wrap: wrap;
Вопрос: Flexbox/Float

Всем доброго дня,
стоит следующая задача: реализовать горизонтальное меню в котором последние два пункта прилипали бы к его правой части.
Первое решение - использование float: left/right: , однако тогда эти пункты меняются местами.
Второе решение - использование flexbox с перевернутыми осями и свойством align-self: , однако способа управлять отступами между строками здесь я не нашел.
Как можно реализовать задуманное? Решение с flexbox в приоритете.
Ответ: Насколько было бы проще жить, если бы была одна статика, но увы.
Вопрос: Стоит ли верстать лендинги, используя flexbox?

Добрый день! Хотелось бы услышать советы верстальщиков со стажем)) Кто уже использует flexbox? По большей части верстаю лендинги для себя. Вот возник вопрос: стоит ли для себя делать лендинги на Bootstrap, либо вот использовать новые возможности CSS и HTML5, в частности flexbox, который может очень сильно упростить и ускорить работу. Как думаете?
Ответ: На хабре в комментах кто-то отписывался, что гуглбот плохо дружит с флексбоксом. Так ли это?
Вопрос: CSS Flexbox

Знатоки flexbox!

Подскажите. Вот у меня например отображается 4 блока в строку. Расстояние между ними задал с помощью justify-content. Как сделать, чтобы когда остается по два эл-та в строку, они растягивались, и отступ между ними был скажем 20px? А если остается вобще ощдин блок, то он просто вытягивался бы на всю ширину?

Ответ: Вот здесь чувак как-то сделал, а у меня не получается

Вопрос: Flexbox

Решил перейти на flexbox и сразу же столкнулся с проблемой. Задача вроде бы типовая: сделать адаптивную сетку из элементов, шириной <=100px.
Вроде бы все хорошо, но когда в последнем ряду элементов меньше, чем в других они растягиваются на всю ширину. Что делать? flex-grow нужен только на полностью заполненных строках.
Код тут:

Можно задать max-width, но тогда пропадет вся фишка и на адаптации придется ее менять
Ответ: как-нить как новая строка - всем элементам добавлять опасити - 0, или визибилити - коллапс.
если элемент заполняется - то убирать это свойство. но это в js секцию, не сюда
думаю так
Вопрос: Flexbox в IE11

Начал изучать flexbox, но наткнулся на проблему с IE, он почему-то выстраивает блоки в столбец, а не в строку, как все остальные браузеры. Подскажите как это исправить?

HTML5
1
2
3
4
5
6
<!DOCTYPE html> 
<html> 
<head> 
<title>Test FLEX</title> 
<meta charset="utf-8"> 
<style type="text/css"> 
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
* { 
   margin: 0; 
   padding: 0;
} 
#myFlexbox { 
   display: flex; 
   flex-direction: row; 
   flex-wrap: wrap; 
   background: red;
} 
#child1 { 
   background: green; 
} 
#child2 { 
   background: blue;
} 
#child3 { 
   background: cyan;
} 
#child4 { 
   background: magenta; 
} 
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
</style> 
</head> 
 
<body> 
<div id="myFlexbox"> 
   <div id="child1">1</div> 
   <div id="child2">2</div> 
   <div id="child3">3</div> 
   <div id="child4">4</div>
</div> 
</div> 
</body> 
</html>
Ответ: iving, я Вам весь топик про это и говорю...