Pertanyaan yang diberi tag «flexbox»

Saya berencana untuk beralih dari layout "floaty" dan menggunakan CSS flexbox untuk proyek mendatang. Saya sangat senang melihat bahwa semua browser utama dalam versi mereka saat ini tampaknya mendukung (dalam satu atau lain cara) flexbox. Saya menuju ke "Dipecahkan oleh Flexbox" untuk melihat beberapa contoh. Namun contoh "Sticky Footer" tampaknya …

117 html  css  flexbox  cross-browser 

Saya memiliki halaman web sederhana dengan beberapa konten Lipsum yang berada di tengah halaman. Halaman ini berfungsi dengan baik di Chrome dan Firefox. Jika saya mengurangi ukuran jendela, konten mengisi jendela sampai tidak bisa dan kemudian menambahkan bilah gulir dan mengisi konten dari layar, ke arah bawah. Namun, halaman tersebut …

116 internet-explorer  css  flexbox  internet-explorer-11 

Dengan menggunakan model kotak fleksibel CSS, bagaimana cara memaksa gambar untuk mempertahankan rasio aspeknya? JS Fiddle: http://jsfiddle.net/xLc2Le0k/2/ Perhatikan bahwa gambar melebar atau menyusut untuk mengisi lebar wadah. Tidak apa-apa, tetapi dapatkah kita juga membuatnya meregangkan atau mengecilkan ketinggian untuk mempertahankan proporsi gambar? HTML <div class="slider"> <img src="http://www.placebacon.net/400/300" alt="Bacn"> <img src="http://www.placebacon.net/400/300" …

114 html  css  flexbox 

Saya punya <div class="parent"> <div class="child" style="float:right"> Ignore parent? </div> <div> another child </div> </div> Orang tua memiliki .parent { display: flex; } Untuk anak pertama saya, saya hanya ingin mengapungkan item ke kanan. Dan div saya yang lain mengikuti aturan flex yang ditetapkan oleh orang tua. Apakah ini mungkin? …

114 html  css  flexbox 

Saya menyimpulkan bahwa ini tidak mungkin dicapai dengan menggunakan Flexbox, karena setiap baris hanya dapat menjadi ketinggian minimal yang diperlukan untuk menyesuaikan elemennya, tetapi dapatkah ini dicapai dengan menggunakan CSS Grid yang lebih baru? Agar jelas, saya ingin ketinggian yang sama untuk semua elemen dalam kisi di semua baris, tidak …

110 css  flexbox  grid-layout  css-grid 

Bagaimana cara mengetahui baris tata letak flexbox mengonsumsi ruang vertikal yang tersisa di jendela browser? Saya memiliki tata letak flexbox 3 baris. Dua baris pertama memiliki tinggi tetap, tetapi baris ketiga dinamis dan saya ingin membuatnya setinggi browser. Saya memiliki flexbox lain di baris-3 yang membuat satu set kolom. Untuk …

102 html  css  flexbox 

Saya ingin menggunakan aplikasi full-height menggunakan flexbox. Saya menemukan apa yang saya inginkan menggunakan modul tata letak flexbox lama ( display: box;dan hal-hal lain) di tautan ini: Aplikasi tinggi penuh CSS3 Flexbox dan overflow Ini adalah solusi yang tepat untuk browser yang hanya mendukung versi lama dari properti CSS flexbox. …

102 html  css  flexbox 

Saya telah menggunakan tata letak kotak fleksibel CSS yang muncul seperti yang ditunjukkan di bawah ini: Jika layar menjadi lebih kecil berubah menjadi ini: Masalahnya adalah gambar tidak diubah ukurannya dengan menjaga rasio aspek dari gambar aslinya. Apakah mungkin menggunakan CSS murni dan tata letak kotak fleksibel untuk membiarkan gambar …

99 html  css  flexbox 

Pertanyaan ini berkaitan dengan browser dengan dukungan css3 penuh termasuk flexbox. Saya memiliki wadah fleksibel dengan beberapa item di dalamnya. Mereka semua dibenarkan untuk flex-start tetapi saya ingin item terakhir .end dibenarkan untuk flex-end. Adakah cara yang baik untuk melakukan ini tanpa memodifikasi HTML dan tanpa menggunakan pemosisian absolut? .container …

97 css  flexbox 

Saya butuh bantuan untuk memperbaiki masalah, saya perlu memusatkan konten di dalam kolom di bootstrap4, silakan temukan kode saya di bawah ini <div class="container"> <div class="row justify-content-center"> <div class="col-3"> <div class="nauk-info-connections"> </div> </div> </div>

95 twitter-bootstrap  flexbox  bootstrap-4 

Sampel: div { display: flex; height: 200px; background: tan; } span { background: red; } <div> <span>This is some text.</span> </div> Jalankan cuplikan kodeHide resultsLuaskan cuplikan Saya punya dua pertanyaan, silakan: Mengapa pada dasarnya hal itu terjadi pada span? Apa pendekatan yang tepat untuk mencegahnya meregang tanpa memengaruhi item flex …

94 html  css  flexbox 

Saya ingin membuat divtongkat di bagian atas layar tanpa mempengaruhi elemen lain, dan elemen turunannya di tengah. .parent { display: flex; justify-content: center; position: absolute; } <div class="parent"> <div class="child">text</div> </div> Jalankan cuplikan kodeSembunyikan hasilLuaskan cuplikan Ketika saya menambahkan position: absolutegaris, justify-content: centermenjadi tidak valid. Apakah mereka bertentangan satu sama …

93 css  react-native  flexbox 

Tampaknya dengan position:absolutedigunakan elemen tidak dapat dipusatkan menggunakan justifyContentatau alignItems. Ada solusi untuk digunakan marginLefttetapi tidak menampilkan yang sama untuk semua perangkat bahkan menggunakan dimensi untuk mendeteksi tinggi dan lebar perangkat. bottom: { position: 'absolute', justifyContent: 'center', alignItems: 'center', top: height*0.93, marginLeft: width*0.18, }, bottomNav: { flexDirection: 'row', },

93 position  react-native  flexbox  absolute 

Saya memiliki wadah fleksibel dengan dua item fleksibel. Saya ingin menetapkan margin-top pada yang kedua, tetapi hanya jika dibungkus dan bukan pada garis fleksibel pertama. Jika memungkinkan, saya ingin menghindari penggunaan kueri media. Saya pikir margin-bottom pada elemen pertama bisa menjadi solusi. Namun, itu menambah ruang di bagian bawah ketika …

93 css  margin  flexbox 

Saya mencoba untuk memusatkan elemen dalam dari <button>-tag dengan flexbox's justify-content: center. Tapi Safari tidak memusatkannya. Saya dapat menerapkan gaya yang sama ke tag lain dan berfungsi sebagaimana mestinya (lihat <p>-tag). Hanya tombol yang rata kiri. Coba Firefox atau Chrome dan Anda dapat melihat perbedaannya. Apakah ada gaya agen pengguna …

91 html  css  safari  flexbox  css-grid