Does 'position: absolute' conflict with Flexbox?

css react-native flexbox
Stanley Luo picture Stanley Luo · Dec 8, 2016 · Viewed 105.3k times · Source

I want to make a div stick on the top of the screen without any influence to other elements, and its child element in the center.

When I add the position: absolute line, justify-content: center becomes invalid. Do they conflict with each other and, what's the solution?

EDIT

Thanks guys it's the problem of parent width. But I'm in React Native, so I can't set width: 100%. Tried flex: 1 and align-self: stretch, both not working. I ended up using Dimensions to get the full width of the window and it worked.

EDIT

As of newer version of React Native (I'm with 0.49), it accepts width: 100%.

Answer

Oriol picture Oriol · Dec 8, 2016

No, absolutely positioning does not conflict with flex containers. Making an element be a flex container only affects its inner layout model, that is, the way in which its contents are laid out. Positioning affects the element itself, and can alter its outer role for flow layout.

That means that

  • If you add absolute positioning to an element with display: inline-flex, it will become block-level (like display: flex), but will still generate a flex formatting context.

  • If you add absolute positioning to an element with display: flex, it will be sized using the shrink-to-fit algorithm (typical of inline-level containers) instead of the fill-available one.

That said, absolutely positioning conflicts with flex children.

As it is out-of-flow, an absolutely-positioned child of a flex container does not participate in flex layout.

Related questions

React native text going off my screen, refusing to wrap. What to do?

The following code can be found in this live example I've got the following react native element: 'use strict'; var React = require('react-native'); var { AppRegistry, StyleSheet, Text, View, } = React; var SampleApp = React.createClass({ render: function() { return ( <View style={styles.…

Read More
Make an item stick to the bottom using flex in react-native

Suppose this is the layout: <View style={styles.container}> <View style={styles.titleWrapper}> ... ... </View> <View style={styles.inputWrapper}> ... ... </View> <View style={styles.footer}> <TouchableOpacity> <View …

Read More
Simulate display: inline in React Native

React Native doesn't support the CSS display property, and by default all elements use the behavior of display: flex (no inline-flex either). Most non-flex layouts can be simulated with flex properties, but I'm flustered with inline text. My app has …

Read More