Как установить внешнюю прокладку/маржу на гибкий ряд?

Question

У меня есть несколько гибких строк, на которые я хочу установить внешний край или дополнение, так что содержимое, например, не достигнет 50 пикселей от края экрана.

Я пробовал все способы общения с width, min-width и flex-basis, чтобы заставить это работать. Каждый раз, когда я что-то приближаюсь к правильному, содержимое по какой-то причине смещается, и/или куча содержимого разливается за пределами области просмотра.

Если вы не используете гибкую коробку, это очень просто с помощью только настроек margin: auto 50px; в строке, но с помощью гибкой коробки я не могу заставить ее работать.

Flex настройки, которые я использую являются:

div { 
 
    position: absolute; 
 
    width: 100%; 
 
    display: flex; 
 
    justify-content: center; 
 
    flex-direction: row; 
 
    justify-content: space-between; 
 
} 
 
div:nth-of-type(1) { 
 
    top: 10%; 
 
    margin: 0; 
 
} 
 
div:nth-of-type(2) { 
 
    top: 20%; 
 
    margin: auto 50px; 
 
}

<div> 
 
    <p>1</p> 
 
    <p>2</p> 
 
    <p>3</p> 
 
    <p>4</p> 
 
</div> 
 

 
<div> 
 
    <p>1</p> 
 
    <p>2</p> 
 
    <p>3</p> 
 
    <p>4</p> 
 
</div>

jsfiddle

В этом примере я хотел бы, чтобы второй ряд, чтобы вести себя так же, как первый, имея все хорошо и по центру -aligned, но с содержимым внутри исходного видового экрана с простой заменой 50px поля, добавленного снаружи второй строки.

обновление

Кроме того, теперь попытался баловаться с добавлением два «распорка» гибких элементов в этой строке на флангах с min-width или flex-basis, но это также не дает желаемый результат.

В принципе, я хочу, чтобы все сокращалось, а не достигало границ, сохраняя определенную ширину от края окна просмотра, а затем в определенной точке разбивать на две строки.

Answer 1

Это не flexbox, это испортить маржу. Это position: absolute.

Когда вы удаляете элемент из потока документов, он не заботится об окружающих свойствах окна (например, содержимое, отступы и разметка). Это проходит через них.

Альтернативный метод - установить максимальную ширину для каждого контейнера.

Затем центрируйте их по горизонтали.

body { 
 
    position: relative; 
 
    height: 100vh; 
 
    margin: 0; 
 
} 
 
div { 
 
    position: absolute; 
 
    display: flex; 
 
    justify-content: space-between; 
 
    width: 80%; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
    background-color: yellow; 
 
} 
 
div:nth-of-type(1) { top: 10%; } 
 
div:nth-of-type(2) { top: 25%; } 
 
div > p { 
 
    flex: 1; 
 
    text-align: center; 
 
    border: 1px dashed black; 
 
}

<div> 
 
    <p>1</p> 
 
    <p>2</p> 
 
    <p>3</p> 
 
    <p>4</p> 
 
</div> 
 
<div> 
 
    <p>1</p> 
 
    <p>2</p> 
 
    <p>3</p> 
 
    <p>4</p> 
 
</div>

revised fiddle

Answer 2

Во-первых, некоторые примечания:

1. Вам не нужно абсолютное позиционирование, чтобы получить выравнивание вы хотите в своей скрипкой, если у вас есть, что для какой-то другой причине.
2. У вас есть пара justify-content объектов недвижимости. Вы можете удалить justify-content: center.
3. Вы также не обязательно должны указывать ширину 100% для разделов, так как использование гибкого дисплея автоматически сделает эти divs заполнением пустого пространства вокруг них.
4. Кроме того, вам не нужно указывать flex-direction: row, если вы не хотите перезаписывать другой стиль. Строка по умолчанию.

Итак, как только мы немного упростили CSS, это просто вопрос добавления поля или заполнения. Вы можете предоставить divs простой размер, например margin: 50px, или, если вы хотите создать эффект окна вокруг всей группы контента, не имея фактически контейнера в вашей разметке, вы можете дать всем строкам одинаковые левые и правые поля, давая первому верхнему краю, а последний - нижнему краю.

Пример этого последнего сценария, используя разметку из вашей скрипки:

HTML:

<div> 
<p>1</p> 
<p>2</p> 
<p>3</p> 
<p>4</p> 
</div> 

<div> 
<p>1</p> 
<p>2</p> 
<p>3</p> 
<p>4</p> 
</div> 

CSS:

div { 
    display: flex; 
    justify-content: space-between; 
} 
div:nth-of-type(1) { 
    margin: 50px 50px 0 50px; 
} 
div:nth-of-type(2) { 
    margin: 0 50px 50px 50px; 
} 

Больше чтения: W3Schools Flexbox guide, CSS Tricks guide with nice illustrations