-1

I have the following situation. A flex container has children displayed as in:

  [                     [div1] [div2] [div3] [div4]]

The container's relevant CSS is set to:

  display:flex;
  justify-content: flex-end;

The inner child divs are set with display: inline-flex. After this CSS is set, over which I have no control initially, I want to position only the first div, div1 to start at the beginning as shown below:

  [[div1]                       [div2] [div3] [div4]]

What is the CSS to be applied in JQuery to div1 to do so. I could take div1 and group the other divs into one element by putting a wrapper around them but that breaks other CSS pre-applied to the grouped-divs over which I have no control. Therefore, I am seeking an alternate solution without introducing any wrappers.

EDIT: I think that I am looking for the equivalent of align-self for align-content or justify-content. align-self only works for align-items to target a specific element.

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Sunny
  • 9,245
  • 10
  • 49
  • 79

1 Answers1

0

ul {
  margin: 0;
  list-style: none;
  padding: 0;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  
}
li:first-child {
  margin-right: auto;
}
.container {
  width: 500px;
  border: 1px solid pink;
  padding: 10px;
}
<div class="container">
  <ul>
  <li>Div1</li>
  <li>Div2</li>
  <li>Div3</li>
  <li>Div4</li>
</ul>
</div>

Hope it will be helpful.

susanta96
  • 89
  • 5
  • I cannot use wrappers. ul is, in effect, a wrapper. Also, you are changing the basic structure. I have no control over it and inserting a wrapper, breaks other CSS, elsewhere which refers to immediate parent. I do not want to change that and in fact have no control over it. – Sunny Oct 11 '20 at 06:18
  • you don't need container wrapper but you need the ul wrapper to flex to work properly – susanta96 Oct 11 '20 at 11:50