Question

139

Why does React Native not offer a justify-self

rated 0 times [ 143] [ 4] / answers: 1 / hits: 34651 / 6 Years ago, wed, june 13, 2018, 12:00:00

I want to align an item in the primary axis. For example, I want to have a row with a few children all aligned left, and then one child aligned on the right side.

You could achieve that effect with something like position: absolute; right: 0, but I'm wondering if theres a better way. It seems like there ought to be a justifySelf property, that only affects one child and affects its alignment on the primary axis, in the same way the alignSelf affects one child's alignment on the secondary axis.

Yet no such justifySelf seems to exist. Why is this?

It's similar to this question but not quite: How can you float: right in React Native?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

eanskylerg

Add To Favorites

Follow

Total Points: 524

Total Questions: 107

Total Answers: 100

Location: Colombia

Member since Mon, May 2, 2022

2 Years ago

eanskylerg questions

1 React Router v6 : How to render multiple component inside and outside a div with the same path

Sat, Feb 19, 22, 00:00, 2 Years ago

1 dotenv: command not found in nestjs project

Sat, Oct 30, 21, 00:00, 3 Years ago

1 How can I resolve the TypeScript Compiler error Namespace 'NodeJS' has no exported member 'Global'?

Mon, Jul 5, 21, 00:00, 3 Years ago

1 Limit x-axis in Apexcharts.js

Wed, Mar 10, 21, 00:00, 3 Years ago

1 Cannot use import statement outside a module in Vuejs. Template Django

Sat, Jan 23, 21, 00:00, 3 Years ago

View All

answered 6 Years ago toddbrandtc · Accepted Answer

I don't know React Native, but I do know flexbox!

Use the following code as a guide:

<div style=display: flex;>



  <div>

    I'll be on the left side

  </div>

  <div>

    I'll be hugging the guy on the left side

  </div>

  <div>

    I'll be hugging the guy hugging the guy on the left side

  </div>

  <div style=margin-left: auto;>

    I'll be hugging the right side far away from those other guys

  </div>



</div>

The margin set on the last child will push all other children to the left as far as their styles will allow, and push itself as far right as any other styles will allow.

You can test this out by also adding margin-right: auto; to the last child, and you will see the last child centered perfectly in the remaining space of the parent div, after the first three children take up their allotted space. This is because the competing margin autos will both share equally whatever space remains, since they can't cancel each other out and won't override each other.

Flex box was designed to handle margin spacing like this, so take advantage of it, as well as the other unique spacing options available under the justify-content property.

Helpful article: https://hackernoon.com/flexbox-s-best-kept-secret-bd3d892826b6