CODEWITHSUNDEEP
cssflexbox
liu duan
liu duan

Reputation: 15

CSS positioning element with flexbox

style

I am trying to style the position something like the photo, I am using the flexbox to do that, but it seems not working as I expect. The first line was correct. My css, html are below: I need some professional comment please thanks

.box {
  display: flex,
  justify-content: space-around,
  flex: 1,
}
<div class="box">
  <span>Account: &nbsp;&nbsp; Payment Acceptance</span>
  <span>Division: Wireless Service Cen</span>
</div>
<div class="box">
  <p>Received by: ....</p>
</div>

<div class="box">
  <p>Reason: &nbsp;&nbsp;&nbsp; ....</p>
</div>

<div class="box">
  <p>Entered by: ....</p>
</div>

Upvotes: 0

Views: 69

Answers (2)

G-Cyrillus
G-Cyrillus

Reputation: 105903

You may switch to a grid layout to draw a grid with columns and rows matching, while grid cells can also span a few columns (or rows).

here is an example (built from a definition list to let the code easier to read and avoid title (hn))

/* grid layout */

.ticket {
  display: grid;
  grid-template-columns: auto 3fr auto 2fr;
}

.colspan3 {
  grid-column: span 3;
}


/* makup */

.ticket {
  box-sizing: border-box;
  padding: 1em 2em;
  max-width: 769px;/* ?? */
  background: #F2F8FD;
  color: #74777A;
  font-size: clamp(12px 3vw,20px);
  gap: 1.25em 0.35em;
}

d,
dd {
  padding: 0;
  margin: 0;
}

dt {
  font-weight: bold;
}

p {
  margin: 0;
}
<dl class="ticket">
  <dt>Account:</dt>
  <dd>Payement Acceptance</dd>

  <dt>Division:</dt>
  <dd>Wireless Service Cen</dd>

  <dt>Received by:</dt>
  <dd class="colspan3">System</dd>

  <dt>Reason:</dt>
  <dd class="colspan3">
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
      Mauris placerat eleifend leo.</p>
  </dd>

  <dt>Entered by:</dt>
  <dd>Gopal Christofferson</dd>
</dl>

Upvotes: 1

mahmoud elgazar
mahmoud elgazar

Reputation: 46

 .box {
  display: flex ; 
  flex: 1;
}
.box p{ 
  flex: 2;
}
 
<div class="box">
  <p>Account: &nbsp;&nbsp; Payment Acceptance</p>
  <p>Division: Wireless Service Cen</p>
</div>
<div class="box">
  <p>Received by: ....</p>
</div>

<div class="box">
  <p>Reason: &nbsp;&nbsp;&nbsp; ....</p>
</div>

<div class="box">
  <p>Entered by: ....</p>
</div>

Upvotes: 0

Related Questions