4

Здравствуйте, кто знает в чем может быть проблема? Поставил display:flex;, но он себя ведет неадекватно: никаких отступов нет, длина в порядке, но какой-то невидимый отступ появляется сверху, при смене расположения со start на end отступ перемещается то вверх то вниз.

.my-flex-container{
  display:flex;
  flex-direction:row;
  justify-content:center;
  align-items:center;
  height:200px;
  width:100%;
}

.tourdiv {
  display:flex;
  background:red;
  width:69%;
  margin:0 2% 0 0;
  min-height:20%;
  max-height:20%;
}

.gallery {
  display:flex;
  background:red;
  width:28%;
  margin:0 1% 0 0;
  min-height:20%;
  max-height:20%;

}
<div class="my-flex-container">
  <div class="tourdiv">
    <span class="galtext">Internal Tours</span>     
  </div>         
  <div class="gallery">
    <span class="galtext">Rent a Car</span>
  </div>
</div>

Скрин 1

Скрин 2

8
  • А разметку можно увидеть со стилями? 28 сен 2016 в 22:34
  • поправил, знаю что - то то не дописал , но разобраться в масштабировании flex не могу ,
    – hovdev
    28 сен 2016 в 22:42
  • И ещё вопрос: чего конкретно хотите добиться с помощью flex? 28 сен 2016 в 23:00
  • он хорошо растягивает и делает элементы резиновыми , да и float не приходится использовать как при display:block;
    – hovdev
    28 сен 2016 в 23:01
  • 1
    Исправьте свойство height:200px; в .my-flex-container. Или удалите это свойство, тогда контейнер родительский будет высоте контента дочерних элементов. 28 сен 2016 в 23:12

3 ответа 3

1

Может так?

Вот инструкция Flexbox

div {
  box-sizing: border-box;
}
.my-flex-container{
  display:flex;
  flex-direction:row;
  flex-wrap: no-wrap;
  justify-content: space-between;
  height: 200px;
  width:100%;
  border: 1px solid #333;
  background-color: #f99;
}

.tourdiv {
  display: block;
  background:red;
  width:70%;
  min-height:20%;
  max-height:20%;
}

.gallery {
  display: block;
  background:red;
  width:30%;
  min-height:20%;
  max-height:20%;
  margin-left: 20px;
}
<div class="my-flex-container">
  <div class="tourdiv">
<span class="galtext">Internal Tours</span>
  </div>    
  
  <div class="gallery">
<span class="galtext">Rent a Car</span>
  </div>
</div>

2
  • Автору нужно было уменьшить высоту самого блока .my-flex-container, о чём он написал в комментарии выше 30 сен 2016 в 6:53
  • @Инженер-погромист Ну тогда ладно. Не защитается мне в карму:)
    – Rosnowsky
    30 сен 2016 в 7:14
0

Flexbox, это концепция, предназначенная для гибкой вёрстки с минимальным конфигурированием. У вас же перебор параметрами габаритов:

  width:69%;
  margin:0 2% 0 0;
  min-height:20%;
  max-height:20%;

И ещё всё в процентах. width - например заменяется на flex-grow, и/или flex-basis. margin - следовало бы убрать у нодов вовсе, иначе не будет красивых квадратных отступов. min-height и max-height в одно значение - дело хозяйское, но флекс более подразумевает гибкость, нежели жёсткое ограничение.

Ну и по теме вопроса:

но какой-то невидимый отступ появляется сверху

Поменяйте align-items в значение flex-start или stretch . А вообще для понимания флекса советую сохранить страницу: https://codepen.io/SelenIT/pen/yNNZxr , чтобы играться с флексом по клику на рабочем столе, я бы ещё апгрейдил код и добавил параметры max-width, max-height , и margin для дочерних нодов.

1
-4

Сделайте резет для начала *{margin:0; padding:0;} отступы уйдут.

2
  • 1
    Постарайтесь писать более развернутые ответы. Поясните, на чем основано ваше утверждение? 29 сен 2016 в 5:15
  • Исполняя код который приведен в вопросе, получаются отступы от края окна броузера, думал вопрос именно об этих отступах.
    – Romani
    29 сен 2016 в 16:25

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.