You are using flex-grow: 1. That means that the initial width of the flex items will be the width of its content, and then the available space will be distributed equally. However, you want the flex items to have the same width, so you want to ignore the width of their content. You can achieve … Read more
Try using flexGrow: 1 instead of flex: 1 in scrollView content container style as follows. <ScrollView contentContainerStyle={{ flexGrow: 1, borderColor: ‘green’, borderWidth: 5 }}> <View style={styles.box1} /> <View style={styles.box2} /> <View style={styles.box1} /> </ScrollView> https://snack.expo.io/HkkEVoh6Z
You can set the flex-basis property of .twit which tells flexbox what base width to give each .twit element, before splitting up the remaining space to all elements. try adding the following CSS to .twit (I used 30% not 33% to account for margins and padding, but you can play with this number.) flex-basis: 30%;
Use nested flex containers and flex-grow: 1. This allows you to create three equal-width sections on the nav bar. Then each section becomes a (nested) flex container which allows you to vertically and horizontally align the links using flex properties. Now the left and right items are pinned to the edges of the container and … Read more
Use modernizr to detect whether flex capabilities are present, and provide fallback styles where necessary. Modernizr will add classes like flexbox, no-flexbox, and flexbox-legacy to the html element, so in your styles you can use: .container { display: flex; } .no-flexbox .container { display: table-cell; } I highly recommend reading through Zoe Gillenwater’s (@zomigi) presentations … Read more
In order to see flex-shrink in action, you need to be able to make its container smaller. HTML: <div class=”container”> <div class=”child one”> Child One </div> <div class=”child two”> Child Two </div> </div> CSS: div { border: 1px solid; } .container { display: flex; } .child.one { flex: 1 1 10em; color: green; } .child.two … Read more
I’m using this solution on a project I’m working on. It sets justify-content: space-between; on the flex container and flex: 1 1 auto; on the children with a left border on all childrens except first. I modified your example CSS so you can have a look. I wasn’t sure if you were going to have … Read more
Is there a way to exclude the first item in a flex wrap other than reorder the markup? After some initial confusion we now understand that what is actually required is for the content to wrap after the first div. Obviously, the simplest method to achieve this is for the first div to be 100% … Read more
The solution ended up being fairly simple. Not entirely intuitive but here’s how to solve this. It appears that the text that needs ellipsis requires flex: 1. <View style={{ flexDirection: “row” }}> <Text numberOfLines={1} style={{ flex: 1, textAlign: “left” }}> {title} </Text> <Text style={{ textAlign: “right” }}>{duration}</Text> </View>;
Revised answer after question edit Here is a CSS only way to achieve that. As the CSS @supports won’t work on your targeted (unwanted) browsers: Safari 7-8, IE <= 10, Android Browser < 4.4, UC Browser for Android and Opera Mini < 8, your “browserupgrade” message will be visible on those using this rule. @supports … Read more