«flexbox» etiketlenmiş sorular

Hepsi aynı genişlikte bazı öğeleri olan flexbox kullanmak istiyorum. Flexbox'ın, alanı kendisinden ziyade, eşit bir şekilde dağıttığını fark ettim. Örneğin: .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> Kod snippet'ini çalıştırSonuçları gizleSnippet'i genişlet İlk öğe …

186 css  flexbox 

Aşağıdaki snippet'i düşünün: .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 

Aşağıdaki gibi çalışması gereken bir iç içe flexbox düzeni üzerinde çalışıyorum: En dıştaki seviye ( ul#main), daha fazla öğe eklendiğinde sağa doğru genişlemesi gereken yatay bir listedir. Çok büyürse, yatay bir kaydırma çubuğu olmalıdır. #main { display: flex; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; /* ...and more... */ } Bu …

168 html  css  flexbox 

Noktaların kutular arasındaki boşluğu temsil ettiği aşağıdaki düzeni düşünün: [Left box]......[Center box]......[Right box] Sağ kutuyu kaldırdığımda, orta kutunun hala merkezde olmasını istiyorum, şöyle: [Left box]......[Center box]................. Sol kutuyu kaldıracaksam da aynı şey geçerli. ................[Center box]................. Artık orta kutudaki içerik uzadığında, ortalanmış olarak kalırken gerektiği kadar kullanılabilir alan kaplar. Sol ve …

162 html  css  flexbox  centering 

Kapalı . Bu soru görüş temelli . Şu anda cevapları kabul etmiyor. Bu soruyu geliştirmek ister misiniz? Bu yayını düzenleyerek gerçekler ve alıntılarla yanıtlanabilmesi için soruyu güncelleyin . 5 yıl önce kapalı . Bu soruyu geliştir Yakın zamanda Flexbox, en yüksek olana bağlı olarak div'leri aynı yükseklikte yapmak için bir …

161 html  css  twitter-bootstrap  flexbox 

Flexbox, görüntüleri doğal yüksekliklerine uzattığı bu davranışa sahiptir. Başka bir deyişle, bir alt resme sahip bir flexbox kabım varsa ve bu görüntünün genişliğini yeniden boyutlandırırsam, yükseklik hiç yeniden boyutlandırılmaz ve görüntü uzatılır. div { display: flex; flex-wrap: wrap; } img{ width: 50% } <div> <img src="https://loremflickr.com/400/300" > <h4>Appify</h4> <p> some …

156 html  css  flexbox 

İle bir kabım <div>var display: flex. Bir çocuğu var <a>. Çocuğu nasıl "satır içi" olarak gösterebilirim? Özellikle, çocuğun genişliğini içeriğine göre belirleyebilir ve ebeveynin genişliğine nasıl genişletemezim? Ne denedim: Çocuğu ben ayarladım display: inline-flex, ama yine de tam genişliğini aldı. Diğer tüm ekran özelliklerini de denedim, ancak hiçbir şeyin etkisi …

154 html  css  flexbox 

Ortada olmasını A Bve Chizalanmasını isterim . Nasıl Dtamamen sağa gidebilirim? ÖNCE: SONRA: 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 throw to the right*/ …

150 html  css  flexbox 

CodePen: http://codepen.io/anon/pen/RPNpaP . Yan yana görünümünde kırmızı kutu sadece 25 em geniş olmasını istiyorum - Bu medya sorgusu içinde CSS ayarlayarak bunu elde etmeye çalışıyorum: @media all and (min-width: 811px) {...} için: .flexbox .red { width: 25em; } Ama bunu yaptığımda, bu olur: http://i.imgur.com/niFBrwt.png Ne yaptığımı biliyor musun?

149 html  css  flexbox 

Sol-sağ bir flexbox'ım var: .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> Kod snippet'ini çalıştırSonuçları gizleSnippet'i genişlet Sorun şu ki, doğru çocuk duyarlı davranmıyor. Spesifik olarak, ambalajın yüksekliğini doldurmasını istiyorum. Bunu nasıl başarabilirim?

141 css  flexbox 

Oldukça sıradan bir duvar düzeni uygulamam gerekiyor. Ancak, birkaç nedenden dolayı bunu yapmak için JavaScript kullanmak istemiyorum. Parametreler: Tüm elemanlar aynı genişliğe sahiptir Öğelerin, sunucu tarafında hesaplanamayan bir yüksekliği vardır (bir görüntü artı çeşitli miktarlarda metin) Mecbur kalırsam sabit sayıda sütunla yaşayabilirim modern tarayıcılarda, çalışan bu önemsiz bir çözüm yoktur …

134 html  css  flexbox  css-grid 

Hepimizin bildiği gibi, flexmülkiyet için bir kısaltmadır flex-grow, flex-shrinkve flex-basisözellikleri. Varsayılan değeri, 0 1 autoyani flex-grow: 0; flex-shrink: 1; flex-basis: auto; ama fark ettim, birçok yerde flex: 1kullanılıyor. 1 1 autoVeya için kısaltma mı 1 0 auto? Ne anlama geldiğini anlayamıyorum ve google'da hiçbir şey alamıyorum.

130 css  flexbox 

Tipik CSS ile, aralarında biraz boşluk bırakarak iki sütundan birini sola ve diğerini sağa kaydırabilirim. Bunu flexbox ile nasıl yaparım? 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; } #b { width: 20%; border: …

123 html  css  flexbox 

Aşağıdaki kod bu canlı örnekte bulunabilir Aşağıdaki tepki yerel unsuruna sahibim: '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 a really long …

123 css  reactjs  react-native  flexbox 

Bu konuyu buldum - Resmin en boy oranını korurken bir resmi <div> 'i dolduracak şekilde nasıl uzatırsınız? - bu tamamen istediğim şey değil. Belli büyüklükte bir div'im ve içinde bir resim var. Görüntünün yatay veya dikey olmasına bakılmaksızın, div'i her zaman görüntüyle doldurmak istiyorum . Ve görüntünün kesilmiş olması da …

120 image  css  positioning  flexbox