0

I want to get the red box to middle of the strip and need to be only 10 em wide. Left and Right contents should be as the image attached. That mean left contain should be align to left and right side content to right align.

enter image description here

My HTML:

<div class="row">
  <div class="meta-left">
    <p>Left Contents with align left...</p>
  </div>
  <div class="logo-bg-top"></div>
  <div class="meta-right">
    <p>Right Contents with align right...</p>
  </div>
</div>

This is how I tried in CSS:

.row {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

.row .logo-bg-top {
    flex: 0 0 9em;
    background: red;
}

Can anybody guide me to fix this issue?

TylerH
  • 20,799
  • 66
  • 75
  • 101
user3733831
  • 2,886
  • 9
  • 36
  • 68
  • I dont get your desired output. If you want to fill the stripped area red, it will have a dynamic width depending on the text length of the outter divs. – JSRB Jun 01 '20 at 08:09
  • 1
    That's not what `flex` is good for. Use a `grid` instead. `display: grid; grid-template-columns: 1fr 10em 1fr;` – Niet the Dark Absol Jun 01 '20 at 08:10

1 Answers1

3

As NiettheDarkAbsol said in the comments, it's better to do this with grid layout:

If you want to use grid, you can do this by adding display: grid; to your main container and then specify the items within it with grid-template-columns: 1fr 10em 1fr;.

fr indicates a fraction of document width, so since the layout is 1⁄3 (We have 3 different child elements) and the middle one is 10em, so each fr will represent (100% - 10em)⁄2 width of the document.

.row {
  display: grid;
  grid-template-columns: 1fr 10em 1fr;
}

.row [class*="meta"] {
  background: blue;
  color: white;
}

.row .meta-right {
  text-align: right;
}

.row .logo-bg-top {
  background: red;
}
<div class="row">
  <div class="meta-left">
    <p>Left Contents with align left...</p>
  </div>
  <div class="logo-bg-top"></div>
  <div class="meta-right">
    <p>Right Contents with align right...</p>
  </div>
</div>

But if you insist on using flexbox layout this could be an approach for doing such a thing:

.row {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  justify-content: center;
}

.row [class*="meta"] {
  background: blue;
  color: white;
  flex: 1;
}

.row .meta-right {
  text-align: right;
}

.row .logo-bg-top {
  flex: 0 0 10em;
  background: red;
}
<div class="row">
  <div class="meta-left">
    <p>Left Contents with align left...</p>
  </div>
  <div class="logo-bg-top"></div>
  <div class="meta-right">
    <p>Right Contents with align right...</p>
  </div>
</div>
TylerH
  • 20,799
  • 66
  • 75
  • 101
SMAKSS
  • 9,606
  • 3
  • 19
  • 34
  • Thank you. Its working for me. its work without `justify-content: center;`. So, is it need? – user3733831 Jun 01 '20 at 08:20
  • Can you explain `flex: 1;` and how it works? – user3733831 Jun 01 '20 at 08:24
  • https://css-tricks.com/snippets/css/a-guide-to-flexbox/ – Bart Hofland Jun 01 '20 at 08:26
  • @user3733831 Sure, I just add a grid solution for you also. Flex is a shorthand for `flex-grow`, `flex-shrink`, and `flex-basis`. So whenever you do `flex: 1` it means `flex-grow: 1` which causes the container to grow to fill the available area. – SMAKSS Jun 01 '20 at 08:28