Question 243053 in Html Question posted in
Some basic documentation can be found here.

Html – css trying to reproduce the grid example with flex

I made this example easily with CSS display: grid… but I think it is impossible to reproduce via flex… is not it?

Link: https://jsfiddle.net/9z43o07g/21/

CSS:

.Message {
  display: inline-grid;
  grid-template-areas: ". name""date text";
}


.Date {
  align-items: center;
  display: flex;
  grid-area: date;
}

.Name {
  grid-area: name;
}

.Text {
  grid-area: text;
}

.Date,
.Name,
.Text {
  border: 1px solid #f00;
  padding: 5px 10px;
}

HTML:

<div class="Message">
  <div class="Name">name</div>
  <div class="Date">date (vertically centered)</div>
  <div class="Text">three<br />line<br />text</div>
</div>
Tags:

2

Answers


  1. 0

    No, it’s not possible to achieve this exact layout with only flexbox, unless you move .Date and .Text elements into another container.

    .Message {
  display: flex;
  flex-flow: row wrap;
  justify-content: end
}

.Break {
  flex: 1 1 100%;
  display: flex;
}

.Date {
  flex: 1 1 fit-content;
}

.Date,
.Name,
.Text {
  border: 1px solid maroon;
  padding: 0.25rem 0.5rem;
}
    <div class="Message">
  <div class="Name">name</div>
  <div class="Break">
    <div class="Date">date (vertically centered)</div>
    <div class="Text">three<br />line<br />text</div>
  </div>
</div>

    However, it’s still not exactly what you have now. So, yeah. You need grid for that.

    Login or Signup to reply.
  2. 0

    You have to play with width:max-content, justify-content:flex-end, margin, wrap and min-width to mimic something very close:

    example:

    .Message {
  margin: 1em;
  width: max-content;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end
}

.Name {
  margin-left: 50%;
}

.Date {
  align-items: center;
  display: flex;
}

.Date,
.Name,
.Text {
  border: 1px solid #f00;
  padding: 5px 10px;
  min-width: 3em; /* give them an average min-width to simulate a last column of same width . tune to your needs */
}
    <div class="Message">
  <div class="Name">name</div>
  <div class="Date">date (vertically centered)</div>
  <div class="Text">three<br />line<br />text</div>
</div>

    Its not because it looks okay, that it is to be used. grid and flex have different purposes and here grid is required 😉

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search