1

Hey Guys I'm making a job application form for a website. I'm using flexbox for the layout but on <div class="row row-9"> I have one label element that sits on the left side and one input element on the right side. I'm using justify-content: space-between; to separate them apart. However I want the input field to expand to fill all of that empty space. Would i do this with the width property? Also Am I even making this form right I have s many css rules with one property and the html doesn't look good either. I've only made one other form before. Thanks for your help:)

https://jsfiddle.net/wpm1crtz/1/

spabsa
  • 151
  • 1
  • 11
  • Just add `flex-grow: 1` to row 9's `input` element ([revised demo](https://jsfiddle.net/kxLw0yc4/)). – Michael Benjamin Feb 09 '19 at 02:01
  • setting the element width to 100% seems to do the trick, also, if you play with the window width a bit you will notice that some of your rows leave those grey spaces on the right side as well – mdln97 Feb 09 '19 at 02:07
  • @mdln97 cant I just get around that with media queries? or is the whole design flawed? – spabsa Feb 09 '19 at 02:39
  • you could definitely do something with media queries, however you should not bother creating a class for each row, wherever you need spaced-between content just put in a single class that – mdln97 Feb 09 '19 at 14:03

1 Answers1

1

input{ flex:2 }

Or however width You want to make the the input. for example if you put flex:2 , it will essentially take up 66% of the row, flex:1 would take up 50% etc.

Rigo De La Torre
  • 44
  • 5
  • 1
    That's not how `flex-grow` works. It distributes free space in the container, and is not percentage based. – Michael Benjamin Feb 09 '19 at 02:02
  • I understand. But if you have div1,div2 inside a parent container div1 - flex:1 ; div2:flex:3 ...wouldnt div2 take up 75% of the container? On the link below they have an example of what Im saying. Towards the middle of the page #Demo https://css-tricks.com/almanac/properties/f/flex/ – Rigo De La Torre Feb 10 '19 at 04:43
  • `flex-grow` sets a proportion. If only one element in the container has `flex-grow`, the value doesn't matter. Values `1`, `2`, `33`, `555` would all be equivalent. If multiple items have `flex-grow`, that's when values matter because, again, they're proportional to each other. – Michael Benjamin Feb 10 '19 at 14:43
  • Your answer `input { flex-grow: 2 }` suggests that you overlooked this concept. It's the only element in the container with `flex-grow`. Therefore, `flex-grow: 1` would be the same. – Michael Benjamin Feb 10 '19 at 14:44
  • With regard to your question about percentages, yes, that is generally correct. Here's a detailed explanation: [flex-grow not sizing flex items as expected](https://stackoverflow.com/q/34644807/3597276) – Michael Benjamin Feb 10 '19 at 14:46