Pertanyaan yang diberi tag «flexbox»

Saya ingin menggunakan flexbox yang memiliki beberapa item dengan lebar yang sama. Saya perhatikan bahwa flexbox mendistribusikan ruang sekitar secara merata, bukan ruang itu sendiri. Sebagai contoh: .header { display: flex; } .item { flex-grow: 1; text-align: center; border: 1px solid black; } <div class="header"> <div class="item">asdfasdfasdfasdfasdfasdf</div> <div class="item">z</div> </div> …

186 css  flexbox 

Pertimbangkan cuplikan berikut: .parent { display: flex; flex-direction: column; width: 400px; border: 1px solid red; align-items: center; } .child { border: 1px solid blue; } <div class="parent"> <div class="child"> Lorem Ipsum is simply dummy text of the printing and typesetting industry </div> <div class="child"> Lorem Ipsum is simply dummy text …

176 css  internet-explorer  flexbox  internet-explorer-11 

Saya sedang mengerjakan tata letak flexbox bersarang yang seharusnya berfungsi sebagai berikut: Level terluar ( ul#main) adalah daftar horizontal yang harus diperluas ke kanan ketika lebih banyak item ditambahkan ke dalamnya. Jika terlalu besar, harus ada bilah gulir horizontal. #main { display: flex; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; /* …

167 html  css  flexbox 

Bayangkan tata letak berikut, di mana titik-titik mewakili ruang di antara kotak-kotak: [Left box]......[Center box]......[Right box] Ketika saya menghapus kotak kanan, saya suka kotak tengah untuk tetap berada di tengah, seperti: [Left box]......[Center box]................. Hal yang sama berlaku jika saya akan menghapus kotak kiri. ................[Center box]................. Sekarang ketika konten di …

162 html  css  flexbox  centering 

Ditutup . Pertanyaan ini didasarkan pada pendapat . Saat ini tidak menerima jawaban. Ingin meningkatkan pertanyaan ini? Perbarui pertanyaan sehingga dapat dijawab dengan fakta dan kutipan dengan mengedit posting ini . Ditutup 5 tahun yang lalu . Perbaiki pertanyaan ini Saya baru-baru ini menemukan Flexboxketika saya sedang mencari solusi untuk …

161 html  css  twitter-bootstrap  flexbox 

Flexbox memiliki perilaku ini saat membentang gambar hingga ketinggian alami. Dengan kata lain, jika saya memiliki wadah flexbox dengan gambar anak, dan saya mengubah ukuran lebar gambar itu, tingginya tidak mengubah ukuran sama sekali dan gambar menjadi melebar. div { display: flex; flex-wrap: wrap; } img{ width: 50% } <div> …

156 html  css  flexbox 

Saya memiliki sebuah wadah <div>dengan display: flex. Ia memiliki anak <a>. Bagaimana saya bisa membuat anak tampak "inline"? Secara khusus, bagaimana saya bisa membuat lebar anak ditentukan oleh kontennya, dan tidak memperluas ke lebar induknya? Apa yang saya coba: Saya mengatur anak untuk display: inline-flex, tetapi masih mengambil lebar penuh. …

154 html  css  flexbox 

CodePen: http://codepen.io/anon/pen/RPNpaP . Saya ingin kotak merah lebarnya hanya 25 em ketika berada di tampilan berdampingan - Saya mencoba untuk mencapai ini dengan menetapkan CSS di dalam kueri media ini: @media all and (min-width: 811px) {...} untuk: .flexbox .red { width: 25em; } Tetapi ketika saya melakukan itu, ini terjadi: …

149 html  css  flexbox 

Saya ingin memiliki A Bdan Cmenyelaraskan di tengah. Bagaimana saya bisa Dpergi sepenuhnya ke kanan? SEBELUM: SETELAH: 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 …

147 html  css  flexbox 

Saya memiliki flexbox kiri-kanan: .wrapper { display: flex; flex-direction: row; align-items: stretch; width: 100%; height: 70vh; min-height: 325px; max-height:570px; } <div class="wrapper"> <div class="left">Left</div> <div class="right">Right</div> </div> Jalankan cuplikan kodeSembunyikan hasilLuaskan cuplikan Masalahnya adalah bahwa anak yang tepat tidak berperilaku responsif. Untuk lebih spesifik, saya ingin mengisi ketinggian bungkusnya. Bagaimana …

141 css  flexbox 

Saya perlu menerapkan tata letak batu yang cukup run-off-the-mill. Namun, untuk sejumlah alasan saya tidak ingin menggunakan JavaScript untuk melakukannya. Parameter: Semua elemen memiliki lebar yang sama Elemen memiliki tinggi yang tidak dapat dihitung sisi server (gambar ditambah berbagai jumlah teks) Saya bisa hidup dengan jumlah kolom yang tetap jika …

134 html  css  flexbox  css-grid 

Seperti yang kita semua tahu, flexproperti adalah singkatan untuk flex-grow, flex-shrink, dan flex-basisproperti. Nilai defaultnya adalah 0 1 auto, yang artinya flex-grow: 0; flex-shrink: 1; flex-basis: auto; tapi saya perhatikan, di banyak tempat flex: 1digunakan. Apakah itu singkatan untuk 1 1 autoatau 1 0 auto? Saya tidak mengerti apa artinya …

129 css  flexbox 

Kode berikut dapat ditemukan dalam contoh langsung ini Saya punya elemen react native berikut: 'use strict'; var React = require('react-native'); var { AppRegistry, StyleSheet, Text, View, } = React; var SampleApp = React.createClass({ render: function() { return ( <View style={styles.container}> <View style={styles.descriptionContainerVer}> <View style={styles.descriptionContainerHor}> <Text style={styles.descriptionText} numberOfLines={5} > Here is …

123 css  reactjs  react-native  flexbox 

Dengan CSS khas saya bisa mengapung satu dari dua kolom ke kiri dan kanan lainnya dengan beberapa ruang selokan di antaranya. Bagaimana saya melakukannya dengan flexbox? http://jsfiddle.net/1sp9jd32/ #container { width: 500px; border: solid 1px #000; display: -webkit-flex; display: -ms-flexbox; display: flex; } #a { width: 20%; border: solid 1px #000; …

123 html  css  flexbox 

Saya menemukan utas ini - Bagaimana Anda meregangkan gambar untuk mengisi <div> sambil mempertahankan rasio aspek gambar? - Itu tidak sepenuhnya yang saya inginkan. Saya memiliki div dengan ukuran tertentu dan gambar di dalamnya. Saya ingin selalu mengisi div dengan gambar terlepas dari apakah gambar tersebut lanskap atau potret. Dan …

120 image  css  positioning  flexbox