The best way to use right or left align

Question

I trying to build a container element with many child elements. I want to have implemented in such a way that some elements can be left aligned some elements can be right aligned. And even a complex scenario like the child elements can be also a container the rule follows there as well. The elements cannot have a fixed size. It should automatically size.

If explain it by a simple example. A window title bar

• Title bar is a container

• It can have title, application icon, and control box

• This control box itself is a container where it holds close, maximize and minimize buttons.

• I want application icon to be left aligned.

• Control box should be right aligned

• The remaining space should be used by title

• If I want to accommodate tabs the tab panel becomes another container with tabs as children. It should be placed between application icon and title.

I guess I'm clear enough. What's the best way to achieve this.

What I've tried.

• I tried with 'block' with float right and left but not flexible
• Tried flex with margin left and right auto.

Still I'm not able to achieve what I need.

I'm sure it's possible with css. But I'm no expert. Please help

Answer 1

Here is the code, hope that help to solve your problem. Link to codepen: https://codepen.io/mesapkota/pen/GRmqvpJ

Html:

<div class="wrapper">
  <div class="title-bar">
    <h1>title Bar</h1>
  </div>
  <div class="container">
    <div class="item">Icon</div>
    <div class="item">Title</div>
    <div class="item">
      <div class="box">
         <div class="btn">Close</div>
        <div class="btn">Maximize</div>
        <div class="btn">Minimize</div>
      </div>
    </div>
  </div>
</div>

CSS:

.wrapper{
  width:600px;
  max-width:600px;
}
.container, .title-bar{
  display:flex;
  width:100%;
}
.item{
   flex: 1;
}
 .box{
 display:flex;
 justify-content:flex-end;
}
.title-bar{
  background:#eee;
  margin-bottom:15px;
}
.title-bar h1{
  font-size:18px;
  text-transform:uppercase;
  padding: 3px;
}
.item,.btn{
  margin-right:10px;
}
.btn {
  background:#666;
  border-radius:5px;
  padding:2px 4px;
  color:#fff;
  font-size:14px;
}
.btn:first-child{
  background:#EB1F12;
}

Answer 2

Can you try this code. Is this what you are looking for?

.title-bar{
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: orange;
  font-size: 18px;
  font-family: monospace;
}

.control-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"/>

<div class="title-bar">
  <div><i class="fab fa-amazon"></i></div>
  <div>Amazing Website</div>
  <div class="control-box">
    <div><i class="fas fa-window-minimize"></i></div>
    <div><i class="far fa-window-maximize"></i></div>
    <div><i class="fas fa-window-close"></i></div>
  </div>
</div>