Строка поиска и элементы управления (дизайн, css)

216

13 апреля 2022, 01:30

Помогите сделать резиновый блок со строкой поиска и дополнительными элементами.

Обязательно:

Все элементы в одну строку,
box2 прижат в право,
поле input занимает все оставшееся пространство

https://jsfiddle.net/bsgh3cro/16/

body{
  width:100%;
}
.main{}
.box1{}
.box2{}

<link href="https://cdn.lineicons.com/2.0/LineIcons.css" rel="stylesheet"/>
<body>
  <div class="main">
  
    <div class="box1">
      <input type="text" value="Search">
      <span><i class="lni lni-search-alt"></i></span>
      <span><i class="lni lni-close"></i></span>
    </div>
    
    <div class="box2">
      <span><i class="lni lni-heart"></i></span>
      <span><i class="lni lni-funnel"></i></span>
    </div>
    
  </div>
  
</body>

Answer 1

.main{
  display: flex;
}
.box1{
  display: flex;
  flex-grow: 1;
}
input {
  flex-grow: 1;
}

<link href="https://cdn.lineicons.com/2.0/LineIcons.css" rel="stylesheet"/>
<body>
  <div class="main">
  
    <div class="box1">
      <input type="text" value="Search">
      <span><i class="lni lni-search-alt"></i></span>
      <span><i class="lni lni-close"></i></span>
    </div>
    
    <div class="box2">
      <span><i class="lni lni-heart"></i></span>
      <span><i class="lni lni-funnel"></i></span>
    </div>
    
  </div>
  
</body>