Domande taggate «flexbox»

Modulo CSS per layout flessibili che offre una vasta gamma di opzioni per allineare gli elementi eliminando la necessità di float e tabelle.

5
Come rendere gli articoli flexbox delle stesse dimensioni?
Voglio usare la flexbox che ha un certo numero di elementi che hanno tutti la stessa larghezza. Ho notato che flexbox distribuisce lo spazio uniformemente, piuttosto che lo spazio stesso. Per esempio: .header { display: flex; } .item { flex-grow: 1; text-align: center; border: 1px solid black; } <div class="header"> …
186 css  flexbox 
12
Il testo in un contenitore flessibile non si avvolge in IE11
Considera il seguente frammento: .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 …
7
Mantieni l'elemento centrale centrato quando gli oggetti laterali hanno larghezze diverse
Immagina il seguente layout, in cui i punti rappresentano lo spazio tra le caselle: [Left box]......[Center box]......[Right box] Quando rimuovo la casella giusta, mi piace che la casella centrale sia ancora al centro, in questo modo: [Left box]......[Center box]................. Lo stesso vale per rimuovere la casella a sinistra. ................[Center box]................. …
162 html  css  flexbox  centering 
2
Come impostare una colonna a larghezza fissa con flexbox CSS
CodePen: http://codepen.io/anon/pen/RPNpaP . Voglio che la casella rossa sia larga solo 25 em quando è nella vista affiancata - Sto cercando di raggiungere questo obiettivo impostando il CSS all'interno di questa query multimediale: @media all and (min-width: 811px) {...} per: .flexbox .red { width: 25em; } Ma quando lo faccio, …
149 html  css  flexbox 
10
Centrare e allineare a destra gli elementi flexbox
Mi piacerebbe avere A Be Callineato nel mezzo. Come posso arrivare Dcompletamente a destra? PRIMA: DOPO: 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 …
147 html  css  flexbox 
1
Come allungare i bambini per riempire l'asse trasversale?
Ho un flexbox sinistro-destro: .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> Esegui snippet di codiceNascondi risultatiEspandi frammento Il problema è che il bambino giusto non si sta comportando in modo reattivo. Per essere precisi, …
141 css  flexbox 
2
Layout in muratura solo CSS
Devo implementare un layout in muratura abbastanza scarso. Tuttavia, per una serie di motivi non voglio usare JavaScript per farlo. parametri: Tutti gli elementi hanno la stessa larghezza Gli elementi hanno un'altezza che non può essere calcolata sul lato server (un'immagine più varie quantità di testo) Posso vivere con un …
134 html  css  flexbox  css-grid 
3
Cosa significa flex: 1?
Come tutti sappiamo, la flexproprietà è una scorciatoia per il flex-grow, flex-shrinke le flex-basisproprietà. Il suo valore predefinito è 0 1 auto, che significa flex-grow: 0; flex-shrink: 1; flex-basis: auto; ma ho notato, in molti posti flex: 1viene utilizzato. È una scorciatoia per 1 1 autoo 1 0 auto? Non …
129 css  flexbox 
11
Reagisce al testo nativo che esce dallo schermo, rifiutandosi di andare a capo. Cosa fare?
Il codice seguente può essere trovato in questo esempio live Ho il seguente elemento nativo di reazione: '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} …
4
Come allineare le colonne flexbox a sinistra ea destra?
Con i CSS tipici potrei far fluttuare una delle due colonne a sinistra e un'altra a destra con un po 'di spazio in mezzo. Come lo farei con flexbox? http://jsfiddle.net/1sp9jd32/ #container { width: 500px; border: solid 1px #000; display: -webkit-flex; display: -ms-flexbox; display: flex; } #a { width: 20%; border: …
122 html  css  flexbox 
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.