Элементы flexbox выравниваются по центру и правому краю с переполнением текста и занимают пустое место слева

avatar
mixalbl4
19 июня 2020 в 13:23
54
1
1

@michael-benjamin Центрировать и выравнивать элементы flexbox по правому краю почти так, как я хочу, но с двумя отличиями:

  1. Div также должен занимать пустое место слева (когда оно широкое)
  2. Div должен сворачивать текст, когда вокруг вообще нет пустого места.

Что у меня есть?

enter image description here

A — главный центрированный объект, а BBBBBBBBBBBBBBB — правый объект.

Это нормально, пока A не будет расти:

enter image description here

Чего я хочу?

enter image description here

Можно ли использовать flex/grid/table-tr-td/любые другие приемы css?

Что я пробовал?

  1. Свойства позиционирования CSS — невозможно остановить при увеличении до B
  2. Flex Auto Margins & Invisible Flex Item (элемент DOM) — невидимый элемент не оставляет пустого места слева
  3. Макет сетки CSS - 1fr не оставлять пустого места слева
Источник

Ответы (1)

avatar
Temani Afif
19 июня 2020 в 13:48
1

Сетка CSS может сделать это, как показано ниже:

.container {
  margin: 10px;
  display: grid;
  grid-template-columns: 1fr minmax(0,max-content) 1fr;
  color: #fff;
}
.container::before {
  content:"";
}

.b {
  margin-left: auto;
  background: grey;
}

.a {
  margin: auto;
  background: blue;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}



body {
  background:linear-gradient(red,red) center/ 2px 100% no-repeat;
}
<div class="container">
  <div class="a">AA</div>
  <div class="b">BBBBBBBBBBBBBBBB</div>
</div>

<div class="container">
  <div class="a">AA</div>
  <div class="b">BBBBBBBBBBBBBBBB</div>
</div>

<div class="container">
  <div class="a">AAAAAAAAAAAAAA</div>
  <div class="b">BBBBBBBBBBBBBBBB</div>
</div>

<div class="container">
  <div class="a">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div>
  <div class="b">BBBBBBBBBBBBBBBB</div>
</div>

<div class="container">
  <div class="a">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div>
  <div class="b">BBBBBBBBBBBBBBBB</div>
</div>