Отступ (поле, отступ) между элементами (CSS) - PullRequest
Новая
       66

Отступ (поле, отступ) между элементами (CSS)

0 голосов
/ 19 октября 2018

Я столкнулся с проблемой: есть флекс-оболочка со стилем 

justify-content: space-between
и 
flex-wrap: wrap
. Я хочу, чтобы перед левой переносом между левой кнопкой, правой кнопкой и текстовым блоком было свободное пространство.И после перехода правой кнопки на следующую строку не будет никакого отступа со стороны «границы».Надеюсь, вы понимаете. 

.long-line {
    max-width: 400px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border: 1px solid;
}
button {
    background: #FFF;
    border: 1px solid;
    border-radius: 5px;
    padding: 10px 12px;
}
<div class="long-line">
  <div class="left-item"><button>Big left button</button></div>
  <div class="center-item">more and more text</div>
  <div class="right-item"><button>right button</button></div>
</div>
https://i.stack.imgur.com/ykxcI.png
https://i.stack.imgur.com/FtyXj.png
https://i.stack.imgur.com/80JbP.png

Ответы [ 2 ]

0 голосов
/ 19 октября 2018

Я нашел одно из возможных решений:
1) удалить отступы из "длинной строки";
2) обернуть кнопки в div;
3) добавить заполнение для детей "длинной строки". 

.long-line {
    max-width: 400px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    border: 1px solid;
}

.long-line > div {
    padding: 10px;
}

button {
    background: #FFF;
    border: 1px solid;
    border-radius: 5px;
    padding: 10px 12px;
}
    
    
<div class="long-line">
    <div class="left-item"><button>Big left button</button></div>
    <div class="center-item">more and more text</div>
    <div class="right-item"><button>right button</button></div>
</div>
0 голосов
/ 19 октября 2018

вы можете задать поле для центра текста, чтобы оно не прилипало к границе.Также верхнее поле для кнопки, если они застряли в некоторых точках обзора.

...