Set right box content to right with flex

Question

I have a div which have 2 child div, now what I want is

For the right child, it should display text at the most right side.
For the left child, its content should be full in length until right content.

div is

<div class="FindInStoreLocation__store">
  <div class="FindInStoreLocation__store__name">
    <span class="Text-ds">Roosevelt Collection</span>
  </div>
  <div class="FindInStoreLocation__store__distance">
    <span class="Text-ds">1.2 miles</span>
  </div>
</div>

How can I write its Css with flex so that I can see content in one line like:

Roosevelt Collection.           1.2 miles

How I am getting it like

kiner_shah · Accepted Answer · 2021-11-22T09:01:54.447

3

You can use justify-content: space-between; for the desired effect.

Read more about it here.

.FindInStoreLocation__store
{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  border: 1px solid black;
}

<div class="FindInStoreLocation__store">
  <div class="FindInStoreLocation__store__name">
    <span class="Text-ds">Roosevelt Collection</span>
  </div>
  <div class="FindInStoreLocation__store__distance">
    <span class="Text-ds">1.2 miles</span>
  </div>
</div>

EDIT:

I think what you want for mobile devices is to not break words between lines like:

Roosevelt           1.2
Collection        miles

but instead in one line itself.

What you need to do is use white-space property with value nowrap along with overflow: hidden.

.FindInStoreLocation__store
{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  border: 1px solid black;
  overflow: hidden;
  white-space: nowrap;
}

<div class="FindInStoreLocation__store">
  <div class="FindInStoreLocation__store__name">
    <span class="Text-ds">Roosevelt Collection</span>
  </div>
  <div class="FindInStoreLocation__store__distance">
    <span class="Text-ds">1.2 miles</span>
  </div>
</div>

edited Nov 22 '21 at 09:01

answered Nov 22 '21 at 07:52

kiner_shah

3,939
7
23
37

But still getting text `Roosevelt Collection` in two rows for mobile, I need in one row. – Ashwani Panwar Nov 22 '21 at 08:43
@AshwaniPanwar, did you try running the above code snippet by clicking on the run button? It should work properly - maybe you should edit the post with the exact code that you tried running (something must be different). Also, which browser did you try? Please edit the question with more details. – kiner_shah Nov 22 '21 at 08:45
Thanks @kiner, using chrome, but for mobile device its in 2 line. – Ashwani Panwar Nov 22 '21 at 08:48
Please edit the question and include the behavior that you get and the behavior that you expect. – kiner_shah Nov 22 '21 at 08:51
@AshwaniPanwar, I have edited my answer, please check. – kiner_shah Nov 22 '21 at 09:02
Thanks @kiner, I edit question after implemeting your css. – Ashwani Panwar Nov 22 '21 at 09:33

Mohammad Afzali · Answer 2 · 2022-12-02T05:41:53.470

2

Add this CSS code:

.FindInStoreLocation__store{
    display: flex;
    justify-content: space-between;
    flex-direction: row;
}

Explanation:

Flex provides a layout that with other properties can help you create the layout you need. we set the flex-direction to row because we want both elements in a row and we set justify-content to space-between because it sets the maximum space that is available between the elements of the row.

edited Dec 02 '22 at 05:41

answered Nov 22 '21 at 07:45

Mohammad Afzali

79
9

Code without any explanation are rarely helpful. Stack Overflow is about learning, not providing snippets to blindly copy and paste. Please edit your question and explain how it answers the specific question being asked. See [How to Answer](https://stackoverflow.com/help/how-to-answer). – Sfili_81 Nov 22 '21 at 07:55
But still getting text `Roosevelt Collection` in two rows in mobile, I need in one row. – Ashwani Panwar Nov 22 '21 at 08:43
@AshwaniPanwar add this CSS: ```flex-direction: row``` It will put the elements in a row – Mohammad Afzali Nov 22 '21 at 09:06

Set right box content to right with flex

2 Answers2