Ortada olmasını A Bve Chizalanmasını isterim .
Nasıl Dtamamen sağa gidebilirim?
ÖNCE:
SONRA:
ul {
padding: 0;
margin: 0;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
li {
display: flex;
margin: 1px;
padding: 5px;
background: #aaa;
}
li:last-child {
background: #ddd;
/* magic to throw to the right*/
}<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>Yanıtlar:
Bu düzeni elde etmek için aşağıda beş seçenek bulunmaktadır:
flex: 1Uygulamak position: relativeEsnek konteynere .
position: absoluteD öğesine uygulayın .
Şimdi bu ürün kesinlikle esnek kabın içine yerleştirildi.
Daha spesifik olarak, D öğesi belge akışından kaldırılır, ancak en yakın konumlandırılmış atanın sınırları içinde kalır .
CSS ofset özelliklerini kullanın topve rightpozisyona bu öğe taşımak.
Bu yöntemin bir uyarısı , bazı tarayıcıların mutlak şekilde konumlandırılmış esnek bir öğeyi normal akıştan tamamen kaldırmayabileceğidir. Bu, hizalamayı standart olmayan, beklenmedik bir şekilde değiştirir. Daha fazla ayrıntı: Kesinlikle konumlandırılmış esnek öğe, IE11'de normal akıştan çıkarılmaz
Kenar boşluklarının bir kombinasyonu ileauto ve yeni, görünmez bir esnek öğe düzen elde edilebilir.
Yeni esnek öğe, öğe D ile aynıdır ve karşı uca (sol kenar) yerleştirilir.
Daha spesifik olarak, esnek hizalama boş alanın dağıtımına dayandığından, yeni öğe, üç orta kutuyu yatay olarak ortalanmış tutmak için gerekli bir dengelemedir. Yeni öğe, mevcut D öğesi ile aynı genişlikte olmalıdır, aksi takdirde ortadaki kutular tam olarak ortalanmaz.
Yeni öğe ile görünümden kaldırılır visibility: hidden.
Kısacası:
DÖğenin bir kopyasını oluşturun .autotutmak için kenar boşluklarını A, Bve Cher ikisi ile, merkezli Delemanları her iki uçtan eşit dengeyi oluşturarak.visibility: hiddenkopya içinDBu yöntem # 2'ye benzer, ancak anlamsal olarak daha temiz ve genişliği Dbilinmelidir.
D.::before.autotutmaya marjları A, Bve Csözde ve birlikte mükemmel merkezli Delemanları her iki ucundan da eşit dengeyi oluşturarak.flex: 1Sol ve sağ öğelere ekleyinYukarıdaki Yöntem # 2 veya # 3 ile başlayarak, eşit dengeyi korumak için sol ve sağ öğeler için eşit genişlik konusunda endişelenmek yerine, yalnızca her birini verin flex: 1 . Bu, ikisini de kullanılabilir alanı tüketmeye zorlar ve böylece ortadaki öğeyi ortalar.
Daha sonra display: flexiçeriklerini hizalamak için tek tek öğeler ekleyebilirsiniz .
Bu yöntemi şununla kullanmak hakkında min-heightNOT : Şu anda Chrome, Firefox, Edge ve muhtemelen diğer tarayıcılarda, kısaltma kuralı şunaflex: 1ayrılıyor:
flex-grow: 1flex-shrink: 1flex-basis: 0%Bu yüzde birimi (%) ile flex-basiszaman nedenleri bu yöntem kırmak için min-heightkap üzerinde kullanılır. Bunun nedeni, genel bir kural olarak, çocuklar üzerindeki yüzde yüksekliklerinin, üst öğe üzerinde açık bir heightözellik ayarı gerektirmesidir .
Bu, 1998 yılına kadar uzanan eski bir CSS kuralıdır ( CSS Seviye 2 ) ve birçok tarayıcıda bir dereceye kadar hala yürürlüktedir. Tüm ayrıntılar için buraya ve buraya bakın .
İşte user2651804 tarafından yorumlarda yayınlanan sorunun bir örneği :
Çözüm, yüzde birimini kullanmamaktır. Deneyin pxya da hiç bir şey yapmayın ( bu, belli başlı tarayıcılardan en azından bazılarının herhangi bir nedenle bir yüzde birimi eklemesine rağmen , spesifikasyonun aslında önerdiği şeydir ).
Bu, en temiz ve en etkili yöntem olabilir. Mutlak konumlandırmaya, sahte öğelere veya diğer bilgisayar korsanlığına gerek yoktur.
Birden çok sütun içeren bir ızgara oluşturun. Ardından, öğelerinizi orta ve son sütunlara yerleştirin. Temel olarak, ilk sütunu boş bırakın.
ul {
display: grid;
grid-template-columns: 1fr repeat(3, auto) 1fr;
grid-column-gap: 5px;
justify-items: center;
}
li:nth-child(1) { grid-column-start: 2; }
li:nth-child(4) { margin-left: auto; }
/* for demo only */
ul { padding: 0; margin: 0; list-style: none; }
li { padding: 5px; background: #aaa; }
p { text-align: center; }<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
<p><span>| true center |</span></p>En kolay yol
.box{
display:flex;
justify-content:center;
}
.item1{
flex:1;
display: flex;
justify-content: center;
transform: translateX(10px);/*D element Width[if needed]*/
} <div class="box">
<div class="item1">
<div>A</div>
<div>B</div>
<div>C</div>
</div>
<div class="item2">D</div>
</div>Eğer hizalamak istiyorsanız, boş bir açıklık ekleyebilir ve üç çocuk açıklığını bunlara bölebilirsiniz.
En basit çözüm, içerik merkezini üst kapsayıcıya yaslamak ve ilk ve son alt öğeye kenar boşluğu-sol otomatik vermek olacaktır.
ul {
display:flex;
justify-content:center;
}
.a,.d {
margin-left:auto;
}<ul>
<li class="a">A</li>
<li>B</li>
<li>C</li>
<li class="d">D</li>
</ul>display:gridYaklaşımı kullanarak, tüm ulçocukları aynı hücreye yerleştirebilir ve ardından justify-selfşunları ayarlayabilirsiniz :
ul {
display: grid;
}
ul > * {
grid-column-start: 1;
grid-row-start: 1;
justify-self:center;
}
ul > *:last-child {
justify-self: right;
}
/* Make Fancy */
li {
display:inline-block;
margin: 1px;
padding: 5px;
background: #bbb;
}<ul>
<span>
<li>A</li>
<li>B</li>
<li>C</li>
</span>
<li>D</li>
</ul>Çok net bir soru. Yardım edemedim ama cevabı birkaç saat kazdıktan sonra gönderdim. Bunu tablolar, masa-hücre, mutlak pozisyonlar, dönüşümler ile çözebilirdik ama bunu sadece flexbox ile yapmamız gerekiyordu :)
.parent {
display: flex;
justify-content: flex-end;
}
.center {
margin: auto;
}Ben genişletilmiş Michael_B 'ın cevabı
.center-flex__2-of-3 > :nth-child(1), .center-flex__2-of-3 > :nth-child(3) {
flex: 1;
}
.center-flex__2-of-3 > :nth-child(1) {
justify-content: flex-start;
}
.center-flex__2-of-3 > :nth-child(3) {
justify-content: flex-end;
}
.center-flex__1-of-2 > :nth-child(1) {
margin: auto;
}
.center-flex__1-of-2 > :nth-child(2) {
flex: 1;
justify-content: flex-end;
}
.center-flex__2-of-2 > :nth-child(1) {
flex: 1;
justify-content: flex-start;
}
.center-flex__2-of-2 > :nth-child(2) {
margin: auto;
}
.center-flex__1-of-2:before, .center-flex__1-of-1:before {
content: '';
flex: 1;
}
.center-flex__1-of-1:after, .center-flex__2-of-2:after {
content: '';
flex: 1;
}
[class*=center-flex] {
display: flex;
list-style: none;
margin: 0;
padding: 0;
border: 10px solid rgba(0, 0, 0, 0.1);
}
[class*=center-flex] > * {
display: flex;
}
li {
padding: 3px 5px;
}2 of 3
<ul class="center-flex__2-of-3">
<span>
<li>Accusamus</li>
<li>Porro</li>
</span>
<span>
<li>Lorem</li>
<li>Dolor</li>
</span>
<span>
<li>Porro</li>
<li>Culpa</li>
<li>Sit</li>
</span>
</ul>
<br><br>
1 of 2
<ul class="akex center-flex__1-of-2">
<span>
<li>Lorem</li>
<li>Dolor</li>
</span>
<span>
<li>Porro</li>
<li>Culpa</li>
<li>Sit</li>
</span>
</ul>
<br><br>
2 of 2
<ul class="akex center-flex__2-of-2">
<span>
<li>Porro</li>
<li>Culpa</li>
<li>Sit</li>
</span>
<span>
<li>Lorem</li>
<li>Dolor</li>
</span>
</ul>
<br><br>
1 of 1
<ul class="center-flex__1-of-1">
<span>
<li>Lorem</li>
<li>Dolor</li>
</span>
</ul>Esinlenerek Yöntem # 5: CSS Izgara Düzeni ait @Michal Benjamin 'in çözüm ve ben Tailwind kullandığım için ve bugün itibariyle hala varsayılan olarak tüm ızgara seçeneklerine erişim yok. Bu işe yarıyor gibi görünüyor:
ul {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
li:nth-child(1) { justify-content: flex-start; } // OR: margin-right: auto
li:nth-child(3) { justify-content: flex-end; } // OR: margin-left:auto
li: {align-self: center;}<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>Not: Flex ve grid'i bu şekilde karıştırmanın iyi bir fikir olduğundan emin değilim!
ul {
padding: 0;
margin: 0;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
li {
display: flex;
margin: 1px;
padding: 5px;
background: #aaa;
}
li:last-child {
background: #ddd;
position:absolute;
right:10px;
}<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>