Pertanyaan yang diberi tag «flexbox»

Saya mencoba mengatur tata letak flexbox dengan tiga kolom di mana kolom kiri dan kanan memiliki lebar tetap, dan kolom tengah tertekuk untuk mengisi ruang yang tersedia. Meskipun mengatur dimensi untuk kolom, mereka masih tampak menyusut karena jendela menyusut. Adakah yang tahu bagaimana mencapainya? Hal tambahan yang perlu saya lakukan …

316 html  css  flexbox 

Saya memiliki 4 kolom flexbox dan semuanya berfungsi dengan baik, tetapi ketika saya menambahkan beberapa teks ke kolom dan mengaturnya ke ukuran font yang besar, itu membuat kolom lebih lebar daripada seharusnya karena properti flex. Saya mencoba menggunakan word-break: break-worddan itu membantu, tetapi masih ketika saya mengubah ukuran kolom menjadi …

313 html  css  flexbox 

Anda dapat mengganti align-itemsdengan align-selfuntuk item fleksibel. Saya mencari cara untuk mengganti justify-contentitem fleksibel. Jika Anda memiliki wadah flexbox justify-content:flex-end, tetapi Anda menginginkan item pertama justify-content: flex-start, bagaimana bisa dilakukan? Ini paling baik dijawab oleh posting ini: https://stackoverflow.com/a/33856609/269396

283 css  flexbox 

Saya menggunakan kotak fleksibel untuk menampilkan 8 item yang secara dinamis akan mengubah ukuran dengan halaman saya. Bagaimana saya memaksanya untuk membagi item menjadi dua baris? (4 per baris)? Ini snip yang relevan: (Atau jika Anda lebih suka jsfiddle - http://jsfiddle.net/vivmaha/oq6prk1p/2/ ) .parent-wrapper { height: 100%; width: 100%; border: 1px …

260 html  css  flexbox 

Jadi, dalam mencoba membuat modal yang berguna menggunakan flexbox, saya menemukan apa yang tampaknya menjadi masalah browser dan saya bertanya-tanya apakah ada perbaikan yang diketahui atau solusi - atau ide tentang cara mengatasinya. Hal yang saya coba selesaikan, memiliki dua aspek. Pertama, membuat jendela modal terpusat secara vertikal, yang berfungsi …

259 html  css  flexbox  browser-bugs 

Ulasan Lengkap Stack Overflow на русском : Item Flexbox - перенос на новую строку Apakah ada cara untuk membuat garis terputus dalam beberapa saluran flexbox? Misalnya untuk istirahat setelah setiap item ke-3 dalam CodePen ini . .container { background: tomato; display: flex; flex-flow: row wrap; align-content: space-between; justify-content: space-between; } …

236 html  css  flexbox 

Saya ingin memiliki menu vertikal dengan ketinggian tertentu. Setiap anak harus mengisi ketinggian induk dan memiliki teks garis tengah. Jumlah anak-anak adalah acak, jadi saya harus bekerja dengan nilai-nilai dinamis. Div .containerberisi jumlah acak anak-anak ( .item) yang selalu harus mengisi ketinggian orangtua. Untuk mencapai itu saya menggunakan flexbox. Untuk …

235 css  google-chrome  webkit  flexbox 

Ada banyak pertanyaan dan artikel tentang ini, tetapi sejauh ini tidak ada yang konklusif. Ringkasan terbaik yang bisa saya temukan adalah flex-basis memungkinkan Anda untuk menentukan ukuran awal / awal elemen, sebelum hal lain dihitung. Ini bisa berupa persentase atau nilai absolut. ... yang dengan sendirinya tidak banyak bicara tentang …

224 css  flexbox  width 

Berikut kode yang saya gunakan untuk mencapai tata letak di atas: .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: …

214 css  layout  multiple-columns  flexbox 

Bagaimana cara memusatkan Teks di ReactNative baik secara horizontal maupun vertikal? Saya punya contoh aplikasi di rnplay.org di mana justifyContent = "center" dan alignItems = "center" tidak berfungsi: https://rnplay.org/apps/AoxNKQ Teks harus di tengah. Dan mengapa ada margin di bagian atas antara teks (kuning) dan wadah induk? Kode: 'use strict'; var …

212 reactjs  flexbox  react-native 

https://jsfiddle.net/vhem8scs/ Apakah mungkin untuk memiliki dua item sejajar kiri dan satu item lurus kanan dengan flexbox? Tautan menunjukkannya dengan lebih jelas. Contoh terakhir adalah apa yang ingin saya capai. Di flexbox saya punya satu blok kode. Dengan float, saya memiliki empat blok kode. Itulah salah satu alasan mengapa saya lebih …

212 css  alignment  flexbox 

Saya memiliki 2 divs berdampingan di sebuah flexbox. Tangan kanan harus selalu sama lebar, dan saya ingin tangan kiri hanya mengambil ruang yang tersisa. Tapi itu tidak akan terjadi kecuali saya secara khusus mengatur lebarnya. Jadi saat ini, sudah diatur ke 96% yang terlihat OK sampai Anda benar-benar menekan layar …

205 html  css  flexbox 

Saya sudah membaca beberapa tutorial flexbox, tetapi saya masih tidak bisa membuat tugas sederhana ini berhasil. Bagaimana saya bisa membuat kotak merah menjadi 100% lebar? Kode: <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 …

203 flexbox  react-native 

Saya mencoba gaya a fieldset elemen dengan display: flexdan display: inline-flex. Namun, itu tidak berhasil: flexberperilaku seperti block, daninline-flex berperilaku seperti inline-block. Ini terjadi pada Firefox dan Chrome, tetapi anehnya itu bekerja pada IE. Apakah ini bug? Saya tidak dapat menemukan bahwa fieldsetseharusnya memiliki perilaku khusus, baik dalam HTML5 maupun …

201 html  css  flexbox 

Dalam tata letak 3 baris: baris atas harus berukuran sesuai dengan isinya baris bawah harus memiliki ketinggian tetap dalam piksel baris tengah harus diperluas untuk mengisi wadah Masalahnya adalah bahwa ketika konten utama mengembang, ia menekan baris header dan footer: HTML: <section> <header> header: sized to content <br>(but is it …

196 css  layout  flexbox