«flexbox» etiketlenmiş sorular

Sol ve sağ sütunlar sabit genişliğe sahip üç sütunlu bir flexbox düzeni kurmaya çalışıyorum ve orta sütun kullanılabilir alanı doldurmak için esniyor. Sütunlar için boyutlar ayarlamaya rağmen, pencere küçüldükçe hala küçülüyor gibi görünüyorlar. Bunu nasıl başaracağını bilen var mı? Yapmam gereken ek bir şey, kullanıcı etkileşimi temelinde sağ sütunu gizlemektir, …

316 html  css  flexbox 

4 flexbox sütun var ve her şey iyi çalışıyor, ama bir sütuna bazı metin eklemek ve büyük bir yazı tipi boyutuna ayarlamak, bu flex özelliği nedeniyle olması gerekenden daha geniş sütun yapıyor. Kullanmaya çalıştım word-break: break-wordve yardımcı oldu, ancak yine de sütunu çok küçük bir genişliğe yeniden boyutlandırdığımda, metindeki harfler …

312 html  css  flexbox 

Esnek bir öğe için align-itemsile geçersiz kılabilirsiniz align-self. justify-contentEsnek bir öğeyi geçersiz kılmanın bir yolunu arıyorum . Bir flexbox konteyneriniz varsa justify-content:flex-end, ancak ilk öğenin olmasını istiyorsanız, justify-content: flex-startbu nasıl yapılabilir? Bu en iyi bu gönderiye cevap verdi: https://stackoverflow.com/a/33856609/269396

283 css  flexbox 

Sayfamla dinamik olarak yeniden boyutlandırılacak 8 öğeyi görüntülemek için bir esnek kutu kullanıyorum. Öğeleri iki satıra bölmeye nasıl zorlarım? (Sıra başına 4)? Alakalı bir ekran alıntısı: (Veya jsfiddle'ı tercih ederseniz - http://jsfiddle.net/vivmaha/oq6prk1p/2/ ) .parent-wrapper { height: 100%; width: 100%; border: 1px solid black; } .parent { display: flex; font-size: 0; …

261 html  css  flexbox 

Bu nedenle, flexbox kullanarak faydalı bir mod oluşturmaya çalışırken, bir tarayıcı sorunu gibi görünen bir şey buldum ve bilinen bir düzeltme veya geçici çözüm olup olmadığını veya nasıl çözüleceğine dair fikir olup olmadığını merak ediyorum. Çözmeye çalıştığım şeyin iki yönü var. İlk olarak, modal pencereyi dikey olarak ortalamak, beklendiği gibi …

259 html  css  flexbox  browser-bugs 

На этот вопрос есть ответы на yığın taşması на русском : flexbox'a madde - перенос на новую строку Çok satırlı flexbox'ta satır sonu yapmanın bir yolu var mı? Örneğin, bu CodePen her 3 öğeden sonra kırmak için . .container { background: tomato; display: flex; flex-flow: row wrap; align-content: space-between; justify-content: …

236 html  css  flexbox 

Belirli bir yükseklikte dikey bir menüye sahip olmak istiyorum. Her çocuk ebeveynin yüksekliğini doldurmalı ve ortalanmış metin içermelidir. Çocuk sayısı rastgele, bu yüzden dinamik değerlerle çalışmak zorundayım. Div .container, .itemher zaman ebeveynin yüksekliğini doldurmak zorunda olan rastgele sayıda çocuk ( ) içerir. Bunu başarmak için flexbox kullandım. Ortaya hizalanmış metinle …

235 css  google-chrome  webkit  flexbox 

Bununla ilgili sorular ve makaleler vardı, ancak söyleyebildiğim kadarıyla kesin bir şey yok. Bulabildiğim en iyi özet flex-based , başka bir şey hesaplanmadan önce öğenin başlangıç ​​/ başlangıç ​​boyutunu belirlemenizi sağlar. Bir yüzde veya mutlak bir değer olabilir. ... kendi içinde esnek temelli setlerin davranışları hakkında fazla bir şey söylemiyor …

224 css  flexbox  width 

Yukarıdaki düzeni elde etmek için kullandığım kod İşte : .header { height: 50px; } .body { position: absolute; top: 50px; right: 0; bottom: 0; left: 0; display: flex; } .sidebar { width: 140px; } .main { flex: 1; display: flex; flex-direction: column; } .content { flex: 1; display: flex; } …

214 css  layout  multiple-columns  flexbox 

ReactNative'de Metin hem yatay hem de dikey olarak nasıl ortalanır? JustifyContent = "center" ve alignItems = "center" çalışmıyor rnplay.org örnek bir uygulama var : https://rnplay.org/apps/AoxNKQ Metin ortalanmalıdır. Ve neden üstte metin (sarı) ve ana kap arasında bir kenar boşluğu var? Kod: 'use strict'; var React = require('react-native'); var { AppRegistry, …

212 reactjs  flexbox  react-native 

https://jsfiddle.net/vhem8scs/ İki öğenin sola, bir öğenin sağa flexbox ile hizalanması mümkün müdür? Bağlantı daha net gösterir. Son örnek, elde etmek istediğim şey. Flexbox'ta bir kod bloğum var. Şamandıra ile dört kod bloğum var. Flexbox'ı tercih etmemin bir nedeni bu. HTML <div class="wrap"> <div>One</div> <div>Two</div> <div>Three</div> </div> <!-- DESIRED RESULT --> …

212 css  alignment  flexbox 

Zaten birkaç flexbox öğretici okudum, ama yine de bu basit görevi çalışmak için yapamıyorum. Kırmızı kutuyu% 100 genişliğe nasıl yapabilirim? Kod: <View style={styles.container}> <Text style={styles.welcome}> Welcome to React Natives </Text> <Text style={styles.line1}> line1 </Text> <Text style={styles.instructions}> Press Cmd+R to reload,{'\n'} Cmd+D or shake for dev menu </Text> </View> stili: container: …

206 flexbox  react-native 

Flexbox'ta yan yana 2 div var. Sağ el her zaman aynı genişlikte olmalı ve sol elin sadece kalan alanı kapmasını istiyorum. Ama özellikle genişliğini ayarlamadığım sürece olmaz. Şu anda, ekranı gerçekten ezene kadar Tamam görünen% 96'ya ayarlandı - o zaman sağdaki div ihtiyaç duyduğu alandan biraz açlık çekiyor. Sanırım olduğu …

205 html  css  flexbox 

Bir stil çalıştı fieldsetile eleman display: flexve display: inline-flex. Ancak, işe yaramadı: flexgibi davrandı blockve inline-flexböyle davrandı inline-block. Bu hem Firefox hem de Chrome'da olur, ancak garip bir şekilde IE'de çalışır. Bu bir hata mı? Ne HTML5 ne de CSS Esnek Kutu Düzeni özellikleri fieldsetherhangi bir özel davranış olması gerektiğini …

204 html  css  flexbox 

3 sıralı bir düzende: üst sıra içeriğine göre boyutlandırılmalıdır alt satırın piksel cinsinden sabit bir yüksekliği olmalıdır orta sıra kabı doldurmak için genişlemelidir Sorun, ana içerik genişledikçe, üstbilgi ve altbilgi satırlarını ezmesidir: HTML: <section> <header> header: sized to content <br>(but is it really?) </header> <div> main content: fills remaining space<br> …

196 css  layout  flexbox