Flexbox, плавающий или дисплейный стол

Обновить Обратите внимание, что ответ kukkuz - хороший хак, но он НЕ работает 100%, если первый поле становится больше содержимого, см. эта скрипка, тогда центральная коробка начинает двигаться вправо

Мне нужно что-то вроде этого:

Где:

Первый ящик "Lorem ipsumd dolor sit amet" всегда должен находиться слева
Второй блок "center content" всегда должен быть центрирован
Третий ящик "float left after center" должен быть сразу после центрального блока
Все эти поля будут иметь длину переменной длины, поэтому она может быть меньше содержимого, чем показано на картинке, или гораздо больше. Для каждого из этих 3 томатных цветных ящиков

Это то, что у меня есть

.flex-container {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  
  -webkit-flex-flow: row wrap;
  justify-content: space-around;
  background-color: powderblue;
}

.flex-item {
  background: tomato;
  padding: 5px;
  height: 100px;
  line-height: 100px;
  color: white;
  text-align: left;
}

<div class="flex-container">
  <div class="flex-item">Lorem ipsumd dolor sit amet</div>
  <div class="flex-item">center content</div>
  <div class="flex-item">float left after center</div>
</div>

Ответы

Ответ 1

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

Вы не можете установить минимальную ширину (произвольную) на боковых контейнерах. Я установил это на 10 пикселей, просто чтобы дать идею.

.flex-container {
  display: flex;
  overflow: hidden;
}
.side {
  flex: 10px 1 0;
  background-color: powderblue;
}
.center {
  flex: auto 0 0;
  background: tomato;
}
.side div {
  background: tomato;
  display: inline-block;
}
.flex-item {
  padding: 5px;
  height: 100px;
  line-height: 100px;
  color: white;
  text-align: left;
}

<div class="flex-container">
  <div class="flex-item side">
    <div>Lorem ipsumd dolor sit amet</div>
  </div>
  <div class="flex-item center">center content</div>
  <div class="flex-item side">
    <div>float left after center</div>
  </div>
</div>

Ответ 2

Я, конечно, пропустил justify-self, но вы можете попробовать взломать: добавьте margin-right: auto в первый и третий flex-item - см. демо ниже:

.flex-container {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  
  -webkit-flex-flow: row wrap;
  justify-content: space-around;
  background-color: powderblue;
}

.flex-item {
  background: tomato;
  padding: 5px;
  height: 100px;
  line-height: 100px;
  color: white;
  text-align: left;
}

.auto {
  margin-right: auto;
}

<div class="flex-container">
  <div class="flex-item auto">Lorem ipsumd dolor sit amet</div>
  <div class="flex-item">center content</div>
  <div class="flex-item auto">float left after center</div>
</div>

Ответ 3

Не уверен, что использование display-table может быть лучшим решением для моей проблемы. Кажется, он выглядит хорошо со всеми различными контентом контента. Не знаете, как

max-width: 10px;

работает с .table-cell, но, похоже, выполняет эту работу.

.display-table {
  display: table;
  height: 70px;
  background-color: powderblue;
  width: 100%;
  margin: 10px 0;
}

.table-row {
  display: table-row;
}

.table-cell {
  border: solid 1px black;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  background: tomato;
  max-width: 10px;
}

.table-cell:first-child,
.table-cell:last-child {
  text-align: left;
}

<div class="display-table">
  <div class="table-row">
    <div class="table-cell">Lorem ipsumd dolor sit amet</div>
    <div class="table-cell">center content</div>
    <div class="table-cell">float left after center</div>
  </div>
</div>


<div class="display-table">
  <div class="table-row">
    <div class="table-cell">Lorem ipsum dolor sit amet</div>
    <div class="table-cell">center content center content center content</div>
    <div class="table-cell">float left after center</div>
  </div>
</div>


<div class="display-table">
  <div class="table-row">
    <div class="table-cell">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat asperiores aliquid rerum optio perferendis aut debitis delectus. Rerum, facilis pariatur debitis libero accusantium numquam expedita ratione aliquid quae temporibus excepturi! ipsumd dolor sit amet</div>
    <div class="table-cell">center content</div>
    <div class="table-cell">float left after center</div>
  </div>
</div>



<div class="display-table">
  <div class="table-row">
    <div class="table-cell">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat asperiores aliquid rerum optio perferendis aut debitis delectus. Rerum, facilis pariatur debitis libero accusantium numquam expedita ratione aliquid quae temporibus excepturi! ipsumd dolor sit amet</div>
    <div class="table-cell">center</div>
    <div class="table-cell">float left after center float left after center periores aliquid rerum optio perferendis aut debitis delectus. Rerum, facilis pariatur debitis libero accusantium numquam expedita ratione aliquid quae temporibus excepturi! ipsumd dolor sit amet
    </div>
  </div>

Ответ 4

Я не думаю, что это возможно с помощью CSS только для всех ваших условий и без добавления оболочки div - с использованием любого метода.

Вы можете получить довольно близко, используя комбинацию position:absolute и margin-left, за исключением того, что средний элемент не будет точно в центре.

.container {
  background-color: powderblue;
  margin: 40px;
  white-space: nowrap;
}
.item1, .item2, .item3 {
  background: tomato;
  padding: 5px;
  height: 100px;
  line-height: 100px;
  color: white;
  text-align: left;
  display: inline-block;
  position: relative;
  z-index: 1;
}
.item1 {
  position: absolute;
  background: green;
  z-index: 0;
}
.item2 {
  margin-left: 50%;
  //transform: translateX(-50%); /* will center, but then no way to pull item3 back */
  z-index:1;
}
.item3 {
  z-index:1;
}

<div class="container">
  <div class="item1"> Lorem ipsumd dolor heth ehe h </div>
  <div class="item2">center content</div>
  <div class="item3">float left after center</div>
</div>

position the first item with a lower z-index - incase the first item is really long

<div class="container">
  <div class="item1"> Lorem ipsumd dolor sit amet fgfdg theth ehe h Lorem ipsumd dolor sit amet fgfdg theth ehe h </div>
  <div class="item2">center content</div>
  <div class="item3">float left after center</div>
</div>

Ответ 5

Просто добавьте это в свой CSS

 .flex-item:nth-of-type(1),.flex-item:nth-of-type(3)
    {
      margin-right:auto;
    }

.flex-container {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  
  -webkit-flex-flow: row wrap;
  justify-content: space-around;
  background-color: powderblue;
}
.flex-item:nth-of-type(1),.flex-item:nth-of-type(3)
{
  margin-right:auto;
}
.flex-item {
  background: tomato;
  padding: 5px;
  height: 100px;
  line-height: 100px;
  color: white;
  text-align: left;
}

<div class="flex-container">
  <div class="flex-item">Lorem ipsumd dolor sit amet</div>
  <div class="flex-item">center content</div>
  <div class="flex-item">float left after center</div>
</div>