горизонтальный центр flex item

Question

Возможно ли горизонтально находиться в центре .div2 без позиции absolute/fixed нравится это изображение?

div3 может изменить ширину

Вот мой код:

body { 
 
    margin:0; 
 
} 
 

 
.test { 
 
    background:green; 
 
    color:#fff; 
 
    display:flex; 
 
} 
 

 
.test .div1 { 
 
    
 
} 
 

 
.test .div2 { 
 
    margin:0 auto; 
 
background:red; 
 
} 
 

 
.test .div3 { 
 
    margin:0 0 0 auto; 
 
}

<div class="test"> 
 
    <div class="div1">Left options</div> 
 
    <div class="div2">Center div</div> 
 
    <div class="div3">Username: test (string can change)</div> 
 
</div>

Answer 1

поддавки дисплея прогибается к родительскому элементу. то justify-contents выравнивает дочерний элемент на главной оси и выравнивает дочерние элементы выравнивания по вертикали.
Получить более подробную информацию https://css-tricks.com/snippets/css/a-guide-to-flexbox/

<div class="test"> 
    <div class="div1">Left options</div> 
    <div class="div2">Center div</div> 
    <div class="div3">Username: test (string can change)</div> 
</div> 
<style> 
.test{ 
display: flex; 
justify-content: space-between; 
align-items: center; 
height: 50px; 
} 
</style> 

Answer 2

Вы можете дать все дивы ширина 33,3333%

.test { 
 
    background:green; 
 
    color:#fff; 
 
    display:flex; 
 
} 
 

 
.test .div1 { 
 
    width:33.3333%; 
 
} 
 

 
.test .div2 { 
 
    margin:0 auto; 
 
background:red; 
 
    width:33.3333%; 
 
} 
 

 
.test .div3 { 
 
    margin:0 0 0 auto; 
 
    width:33.3333%; 
 
}

<div class="test"> 
 
    <div class="div1">Left options</div> 
 
    <div class="div2">Center div</div> 
 
    <div class="div3">Username: test (string can change)</div> 
 
</div>

Answer 3

Используйте Display:felx свойство стиля, как показано ниже.

body { 
 
    margin:0; 
 
} 
 

 
.test { 
 
    background: green; 
 
    color:#fff; 
 
    display:flex; 
 
} 
 

 
.test div { 
 
    flex: 1; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    border: 1px solid #ccc; 
 
    background-color: green; 
 
    height: 50px; 
 
}

<div class="test"> 
 
    <div>Left options</div> 
 
    <div>Center div</div> 
 
    <div>Username: test (string can change)</div> 
 
</div>

Answer 4

float:left; всем div с в .test будет делать трюк.

.test>div{float:left;} 

Если вы хотели бы, чтобы div с, чтобы занять всю ширину, а затем дать ему ширину width:33.3333%; (нет. Из divs/100)

DEMO

Answer 5

Я asuming, что вы хотите div2, чтобы сохранить его размер, а элементы div1 и div3 расти до тех пор, пока они не коснутся его. Набор для этих элементов а сгибать-основа 0:

body { 
 
    margin: 0; 
 
} 
 
.test { 
 
    background: green; 
 
    color: #fff; 
 
    display: flex; 
 
} 
 
.test .div2 { 
 
    background: red; 
 
} 
 
.test .div1, 
 
.test .div3 { 
 
    flex-basis: 0; 
 
    flex-grow: 1; 
 
} 
 
.div3 { 
 
    text-align: right; 
 
}

<div class="test"> 
 
    <div class="div1">Left options</div> 
 
    <div class="div2">Center div</div> 
 
    <div class="div3">Username: test (string can change)</div> 
 
</div>