web-dev-qa-db-fra.com

React Feuille de style native: que fait {flex: 1}?

React Native utilise flexbox pour la présentation. Dans tous les exemples que j'ai vus, ils font quelque chose comme ceci:

var styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row'
  }
});

Je suis curieux de connaître le flex: 1 partie. Basé sur la définition de Chris Coyier ici https://css-tricks.com/snippets/css/a-guide-to-flexbox/ , flex: 1 devrait être identique à flex-grow: 1, mais pour moi, ça ressemble à flex: 1 in React Natif est équivalent à display: flex en CSS.

Voici un CodePen qui démontre que flex: 1 the way React Les exemples natifs l'utilisent; cela ne fait rien en CSS:

http://codepen.io/johnnyo/pen/BoKbpb

Ce n'est que lorsque nous utilisons display: flex en CSS jusqu’à flexbox commence à fonctionner:

http://codepen.io/johnnyo/pen/epZXgz

Cela signifie-t-il donc que flex: 1 in React Natif est équivalent à display: flex en CSS?

flexboxreact-native
49
Johnny Oshika

Il y a toute une différence entre css flexbox et celui implémenté par Facebook. Beaucoup de choses en commun mais les valeurs par défaut sont très différentes. Plus précisément:

Everything is display: flex by default. All the behaviors of block and inline-block can be expressed in term of flex but not the opposite.

flex: attribut n'est utilisé que lorsque, au même niveau, il y a peu de composants ayant des valeurs de flex différentes (flex: 1, flex: 3) signifie que le deuxième élément doit être 3 fois plus grand que le premier. L'attribut flex est le seul supporté (pas de support de croissance/réduction).

Plus d'infos: https://github.com/facebook/css-layout

35
Jarek Potiuk

Une remarque à propos de la réponse de Jarek Potiuk: 'flex: 1' fait quelque chose de réactif natif similaire au comportement de flex-grow. Même si c'est le seul avec flex: défini.

Les styles tels que flexDirection, alignItems, JustContent définissent tous le style des enfants de l'élément. Similaire à CSS Display: flex, qui définit également les enfants.

En revanche, flex: x définit l'élément lui-même.

Par exemple. si un composant conteneur a flexDirection: 'row', alignItems: 'center'
Et il y a 3 enfants:

l'enfant 1 a la largeur 50

l'enfant 2 a un flex 1 (ou un autre nombre, mais 1 est une pratique courante)

l'enfant 3 a la largeur 50

Ensuite, le composant central "s'étire" de sorte que les 3 enfants remplissent ensemble la largeur totale du composant parent.

24
wintvelt

Beaucoup de tutoriels utilisent flex: 1, un peu comme dans votre exemple. La raison principale en est que parfois (en fonction de l'élément, tel que ListStyle par défaut, si ma mémoire est bonne), le composant n'occupe pas tout l'écran./area si vous ne définissez pas les dimensions, telles que la hauteur (par exemple. height: '400px'). Flex: est génial car il garde les choses réactives pour différentes tailles.

Mais je dois noter que pour tout composant avec pas de frères et soeurs, la valeur de flex est totalement arbitraire. Ex. pour votre composant de niveau supérieur, vous pourriez dire flex: 43254315 et il fait la même chose que flex: 1. Cela signifie simplement "occuper tout l'espace" (quel que soit "tout" qui puisse être).

D'un autre côté, si vous avez des composants frères, alors la valeur flex compte beaucoup. Par exemple, si un composant est flex: 2 et un autre est flex: 3, la première occupe les 2/5 de l’écran et la seconde, les 3/5 de l’écran.

En bref: selon vos styles, il pourrait ressembler à flex: 1 est le même que display: flex _, mais c'est uniquement à cause de la façon dont vous l'utilisez dans votre exemple. Vous verrez qu'il agit très différemment si vous lui donnez des frères et sœurs.

11
Ryo-code

Comme vous, j'ai eu du mal à comprendre cette balise qui n'est pas documentée correctement sur Facebook Code, mais j'ai finalement découvert qu'elle remplissait deux fonctions:

  1. Les conteneurs considèrent que tous les enfants avec un attribut flex ont une hauteur de 0 afin de déterminer la quantité d’espace qu’ils occupent.
  2. Composants avec flex: X augmentez la taille pour occuper toute la place qui reste dans leur conteneur une fois les autres composants disposés. Ils partagent cet espace supplémentaire proportionnellement à leurs valeurs X.

Le premier élément est pourquoi flex: 1 peut sembler avoir le même effet que display: flex. Considérez le code JSX suivant:

<ExampleAppContainer>
    <Text>
        I get printed.
    </Text>
    <Text style={{flex: 1}}>
        But I don't :(
    </Text>
</ExampleAppContainer>

Seul le premier composant texte est imprimé, car le second est considéré comme ayant une hauteur de 0. ExampleAppContainer alloue suffisamment d'espace pour le premier composant texte et ne laisse aucune place au développement du second.

Considérons maintenant ce code:

<ExampleAppContainer style={{flex:1}}>
    <Text>
        I get printed.
    </Text>
    <Text style={{flex: 1}}>
        And so do I!
    </Text>
</ExampleAppContainer>

Depuis ExampleAppContainer a flex: 1, il s’agrandit pour occuper le plus de place possible. En supposant qu’il s’agisse du composant racine de la partie React de votre application, il s’agit généralement de l’écran du téléphone tout entier. Ensuite, il alloue suffisamment d’espace pour le premier composant texte et permet le second. composant de texte à développer, occupant le reste de l'écran.

De cette façon, vous devrez souvent appliquer flex: 1 tout au long de la hiérarchie des composants afin de permettre à vos composants les plus internes avec flex: N pièce pour se développer correctement.

8
Peter Evan Deal
flex: 1

  1. Indique à un composant de remplir tout l'espace disponible (partagé entre d'autres composants avec le même parent).

  2. S'il existe des composants frères avec les valeurs flex, leur parent doit avoir flex: 1 (ou plus). Si un parent n'a pas de largeur et de hauteur fixes ni de flexion, les dimensions du parent seront 0 et les enfants de flex ne seront pas visibles.

2
Fellow Stranger

c'est très simple, pensez simplement que lorsque vous dites flex: 1 à n'importe quel élément, cet élément a toute la hauteur de l'élément parent si cet élément a flex: 1 et que l'élément parent n'a pas toute la hauteur de la taille de l'écran.

par exemple, vous voulez avoir un élément conteneur qui a toute la hauteur de l'écran et cet élément a trois éléments enfants, chaque élément ayant 1/3 de la taille de l'écran pour cet exemple, il suffit d'obtenir l'élément parent flex: 1 et les trois éléments enfants flex: 1/3 voir le code ci-dessous

<View style={{flex: 1,backgroundColor: 'red'}}>

        <View style={{flex: 1/3, backgroundColor: 'green'}}></View>

        <View style={{flex: 1/3, backgroundColor: 'yellow'}}></View>

        <View style={{flex: 1/3, backgroundColor: 'pink'}}></View>

      </View>
2
hamidreza ghanbari