0

I have a flex-container(row), where Im looking for the first object to be left justified at a static width, and then for the next object to be centered and fill the remainder of the container.

[ (obj1) | <----------(obj2)---------> ]

I know that I could accomplish this easier with the grid styling below, but my goal here is to educate myself in flex.

display:grid; grid-template-columns: 100px 1fr;

Thanks!

Chris Phillips
  • 1,997
  • 2
  • 19
  • 34

2 Answers2

1

Please see the code snippets for the flex implementation.

.wrapper {
  display: flex;
}

.obj-a {
  background: lime;
  flex-basis: 100px;
}
.obj-b {
  background: skyblue;
  flex-grow: 1;
  display: flex;
  justify-content: center;
}
<div class="wrapper">
  <div class="obj-a">obj-a</div>
  <div class="obj-b">obj-b</div>
</div>
yinsweet
  • 2,823
  • 1
  • 9
  • 21
1

yes this can be done in flex best read is here

you need to use flex-shrink, flex-grow, flex-basis the short form as below

flex: shrink grow basis ie. flex: 1 1 auto

below is the example I use flex short-form and added a border for representation purposes.

* {
  borx-sizing: border-box;
}

.flex-container {
  display: flex;
  flex-direction: row;
  border: 1px solid black;
  height: 200px;
  padding: 1em;
}

.flex-container .left {
  width: 100px;
  border: 2px solid red;
  height: 200px;
}

.flex-container .main {
  flex: 1 1 auto;
  border: 2px solid green;
  height: 200px;
}
<div class="flex-container">
  <div class="left"></div>
  <div class="main"></div>
</div>
nmanikiran
  • 2,866
  • 15
  • 19