WilsonG WilsonG - 3 months ago 10
CSS Question

Expanding line to full width with only CSS

Maybe someone has any bright ideas how to replace my current solution to one of the problems via only CSS? I have a working JS solution, just curious if there is a CSS-only one.

enter image description here

A) Elements here have the same width, only the number of elements changes (can be more or less).

B) The line should expand to full width that is empty left here (the problem is here).

C) Text is dynamic (always other width).

Is it possible to set the B) element, so it would fill the width?

Answer

Yes it is possible with Flexbox, you can just set flex: 1 on lines and they will take rest of free space.

.content,
.a {
  display: flex;
  align-items: center;
}
.box {
  width: 50px;
  height: 50px;
  margin: 5px;
  background: red;
}
.line {
  flex: 1;
  border-bottom: 1px dashed black;
}
<div class="content">
  <div class="a">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  <div class="line"></div>
  <div class="text">Lorem ipsum.</div>
  <div class="line"></div>
  <div class="text">Text</div>
</div>

Comments