«flexbox» etiketlenmiş sorular

Ben kullanıyorum FlexBox öğeleri arasında minimum mesafe ayarlamak için margin: 0 5pxüzerinde .itemve margin: 0 -5pxkonteyner üzerinde. Benim için bir saldırı gibi görünüyor, ama bunu yapmanın daha iyi bir yolunu bulamıyorum. Misal #box { display: flex; width: 100px; margin: 0 -5px; } .item { background: gray; width: 50px; height: 50px; …

777 css  flexbox 

Kullanmaktan daha fazla "İletişim" sağa hizalamanın daha esnek bir yolu var position: absolutemı? .main { display: flex; } .a, .b, .c { background: #efefef; border: 1px solid #999; } .b { flex: 1; text-align: center; } .c { position: absolute; right: 0; } <h2>With title</h2> <div class="main"> <div class="a"><a href="#">Home</a></div> …

681 html  css  flexbox 

Esnek bir kabın ana eksenini ve çapraz eksenini düşünün: Kaynak: W3C Esnek öğeleri ana eksen boyunca hizalamak için bir özellik vardır: justify-content Esnek öğeleri çapraz eksen boyunca hizalamak için üç özellik vardır: align-content align-items align-self Yukarıdaki görüntüde, ana eksen yatay ve çapraz eksen dikeydir. Bunlar bir esnek kabın varsayılan yönleridir. …

677 css  flexbox  language-lawyer  w3c 

Div'ı flexbox kullanarak yatay ve dikey olarak konteyner içinde ortalamak. Aşağıdaki örnekte, her bir sayının yatay olarak ortalanmış (satırlar halinde) birbirlerinin altında olmasını istiyorum. .flex-container { padding: 0; margin: 0; list-style: none; display: flex; align-items: center; justify-content: center; } row { width: 100%; } .flex-item { background: tomato; padding: 5px; …

671 html  css  flexbox 

Bir Flexbox içindeki bir flex öğesinin dikey alanını doldurmaya çalışıyorum. .container { height: 200px; width: 500px; display: flex; flex-direction: row; } .flex-1 { width: 100px; background-color: blue; } .flex-2 { position: relative; flex: 1; background-color: red; } .flex-2-child { height: 100%; width: 100%; background-color: green; } <div class="container"> <div class="flex-1"></div> …

459 css  flexbox 

Yan yana iki divim var. Bunların yüksekliğinin aynı olmasını ve onlardan biri yeniden boyutlandırılırsa aynı kalmasını istiyorum. Bunu anlayamıyorum. Fikirler? Kafa karıştırıcı sorumu açıklığa kavuşturmak için, her iki kutunun da her zaman aynı boyutta olmasını istiyorum, bu yüzden metin içine yerleştirildiği için büyürse, diğeri yüksekliğe uyacak şekilde büyümelidir. <div style="overflow: …

441 html  css  html-table  flexbox 

Bazı içeriği dikey olarak hizalamak için flexbox kullanmak istiyorum, <li>ancak büyük bir başarı elde edemiyorum. Çevrimiçi kontrol ettim ve öğreticilerin çoğu aslında align-items:centerebeveyn üzerindeki esnek ayarlardan alan bir sarıcı div kullanıyor , ancak merak ediyorum bu ek öğeyi kesmek mümkün mü? Liste öğesi yüksekliği dinamik olacağından bu örnekte flexbox kullanmayı …

424 html  css  flexbox 

Ben bir konteyner div, böyle bir şey içinde hizalanmış 3 div istiyorum: [[LEFT] [CENTER] [RIGHT]] Kapsayıcı bölmesi% 100 genişliğindedir (ayarlı genişlik yok) ve kapsayıcı yeniden boyutlandırıldıktan sonra orta bölme ortada kalmalıdır. Ben de ayarladım: #container{width:100%;} #left{float:left;width:100px;} #right{float:right;width:100px;} #center{margin:0 auto;width:100px;} Ama olur: [[LEFT] [CENTER] ] [RIGHT] Herhangi bir ipucu?

392 html  css  flexbox  alignment  css-float 

Ben gibi bir konteyner ile basit bir esnek kutu düzeni var: .grid { display: flex; flex-flow: row wrap; justify-content: space-between; } Şimdi son satırdaki öğelerin diğeriyle hizalanmasını istiyorum. justify-content: space-between;kullanılmalıdır çünkü ızgaranın genişliği ve yüksekliği ayarlanabilir. Şu anda benziyor Burada, sağ alttaki öğenin "orta sütun" içinde olmasını istiyorum. Bunu başarmanın …

378 css  flexbox  grid-layout 

Bir var divbazı çocuklarla: <div class="content"> <h1>heading 1</h1> <h2>heading 2</h2> <p>Some more or less text</p> <a href="/" class="button">Click me</a> </div> ve aşağıdaki düzeni istiyorum: ------------------- |heading 1 | |heading 2 | |paragraph text | |can have many | |rows | | | | | | | |link-button | ------------------- Ne …

375 html  css  flexbox 

En fazla 5 öğe ve en az 3 öğe içeren bir flexbox nav deneniyor, ancak genişliği tüm öğeler arasında eşit olarak bölmüyor. Vaktini boşa harcamak Bundan sonra modellediğim öğretici http://www.sitepoint.com/responsive-fluid-width-variable-item-navigation-css/ SUKDÖ * { font-size: 16px; } .tabs { max-width: 1010px; width: 100%; height: 5rem; border-bottom: solid 1px grey; margin: 0 …

368 html  css  flexbox 

Herkes beni arasındaki farkı gösterebilir align-itemsve align-content?

366 css  layout  flexbox  alignment 

Bir gezinme çubuğu öğesini sağa nasıl hizalayabilirim? Giriş yapmak ve sağa kaydolmak istiyorum. Ama denediğim her şey işe yaramıyor. Şimdiye kadar denedim budur: <div>etrafında <ul>atribute ile:style="float: right" <div>etrafında <ul>atribute ile:style="text-align: right" <li>Etiketlerdeki bu iki şeyi denedim !importantsonuna kadar eklenen tüm bu şeyleri tekrar denedim değişti nav-itemiçin nav-rightde<li> bir pull-sm-rightsınıf ekledi<li> …

341 css  twitter-bootstrap  flexbox  bootstrap-4  navbar 

Bir kimlik sarıcı içindeki öğeleri dikey olarak hizalamaya çalışıyorum. display:inline-flex;Kimlik sarmalayıcı esnek konteyner olduğundan özelliği bu kimliğe verdim . Ancak sunumda bir fark yoktur. Sarıcı kimliğindeki her şeyin görüntülenmesini bekledim inline. Neden olmasın? #wrapper { display: inline-flex; /*no difference to display:flex; */ } <body> <div id="wrapper"> <header>header</header> <nav>nav</nav> <aside>aside</aside> <main>main</main> …

331 css  flexbox 

Kapsayıcımı Bootstrap 4 kullanarak sayfanın ortasına ortalamaya çalışıyorum. Şimdiye kadar başarısız oldum. Herhangi bir yardım mutluluk duyacağız. Ben de bunu yerleşik Codepen.io siz onunla oynamak ve bana fikirlerin dışarı üzereyim olarak işe yaradığını bilgi verebilmemiz için ... Kod snippet'ini göster var currentAuthor = ""; var currentQuote = ""; function randomQuote() …

322 html  css  twitter-bootstrap  flexbox  bootstrap-4