Evenly Distributed Height of Child Elements with CSS

Distribute DIV children evenly over entire height and width of container

This type of layout can be achieved using CSS Flexbox.

First turn your wrapping element into a flexbox by adding display:flex. Next add flex:1 1 auto to your boxes to allow them to grow and shrink as needed to fill the space.

To keep your boxes from being squished into one line by flexbox, set a min-width value on them. I've used min-width:30% but this number can be changed to suit your needs. 30% will mean that the maximum number of boxes in a row at any time is 3 (as it is just below 1/3 or 33% of the container's width).

Try adding or removing boxes from the example code below.

#wrapper {  display:flex;  flex-wrap:wrap;  width:400px;  height:400px;}
.box {  background-color:white;  border:1px solid black;  min-width:30%;  flex:1 1 auto;  }

<div id='wrapper'>  <div class='box'></div>  <div class='box'></div>  <div class='box'></div>  <div class='box'></div>  <div class='box'></div>  <div class='box'></div>  <div class='box'></div>  <div class='box'></div></div>

CSS: space li so they are evenly distributed vertically in a div of fixed height

I hope you don't have li's as direct children of a div, this would not be valid HTML.

To evenly distribute li's inside a ul, you could set the ul to display: table and the li's to display: table-row:

ul {
    height: 300px;
    display: table;
}
li {
    display: table-row;
}
li:before {
    content:'•';
    float: left;
    width: 20px;
    font-size: 1.8em;
    line-height: 0.75em;
}

Here's a jsFiddle

If you have a div wrapping the ul, and you want the li's to be evenly spaced vertically inside this div, all you'd need to change is setting the fixed height on the div instead, and setting the ul's height to 100%.

Edit

I realised the solution didn't play well in any version of IE, this updated version fixes that by rendering the bullet point inside the pseudo element, and it then set the font-size, line-height and width on the pseudo element to get it to look good and line things up, it works in IE8+ and all other browsers.

Equally distribute the height of an unknown number of children divs inside a parent div

http://jsfiddle.net/KQZZy/

$(".parent").each(function(){
    var $this = $(this);
    var $children = $this.children();

    $children.height($this.height() / $children.length - 2);
});

Note that the - 2 is to adjust for the borders I have on the divs and in your case may be unneeded.

How to space children evenly horizontally in css

Will something like this be a good start?

.container {  width: 80%;  margin: 0 auto;  background-color: #eee;  text-align: center;}
.item {  display: inline-block;  width: 15%;  height: 60px;  margin: 10px 2%;  background-color: #bbb;}

<div class="container">  <div class="item"></div>  <div class="item"></div>  <div class="item"></div>  <div class="item"></div>  <div class="item"></div></div>

How to distribute Image and child elements evenly using flex box?

I'm not quite sure I get what you're trying to achieve here, but looking at that 2/4 image and 2/4 textinput, and from this line So far I'm not having much luck spacing the image and text inputs evenly on the y-axis
I believe you want the image taking up 50% of the row and the 3 textinput to collectively take up the rest of the 50%.

You can import Dimensions from react-native and do

const ScreenWidth = Dimensions.get('window').width;

and then use maxWidth to prevent the image from being too big

Here is the SnackExpo for my code. https://snack.expo.io/HJXemkUXM

Maybe you could do a quick sketch on paint or something to show us what you want where and how you want it to look.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    // alignItems: 'center',
    // justifyContent: 'space-between',
    backgroundColor: 'lightgreen',
    maxWidth: ScreenWidth,
    paddingTop: 25,
  },
  image: {
    maxWidth: ScreenWidth*0.50,
    height: 200,
    // flex: 2/4,
    // resizeMode: 'contain',
    // width: 800,
    // height: 800,
  },
  floatLabelTextInput: {
    // flex: 2/4,
    // padding: 8,
  },
});

Evenly distribute images vertically within fixed-height space

You want to:

set the div to display:table with a fixed height,
wrap each <img> in element with display:table-row and display:table-cell
set the images to display:block
set the table-cell elements to vertical-align:middle
set the height of the first and last rows to be exactly as tall as the images themselves

This will cause the space to be evenly distributed vertically.

Demo: http://jsfiddle.net/X2URZ/2/

Code:

<ul id="img-list">
  <li><span><img src="http://phrogz.net/tmp/gkhead.jpg"></span></li>
  <li><span><img src="http://phrogz.net/tmp/gkhead.jpg"></span></li>
  <li><span><img src="http://phrogz.net/tmp/gkhead.jpg"></span></li>
</ul>

#img-list { display:table; height:100px }
#img-list img { height:20px; display:block }
#img-list li { display:table-row }
#img-list li span { display:table-cell; vertical-align:middle; background:red }
#img-list li:first-child,
#img-list li:last-child { height:20px }

Fill out the height of a variable number of child elements, when the parent element has a fixed height

This is a classic case for a flexbox. Flexbox is partially supported by IE10 using the -ms- prefix, so this should work in IE10 (I've no way to check it):

.container-element {  display: -ms-flexbox;  /* TWEENER - IE 10 */  display: flex;  -ms-flex-direction: column;  flex-direction: column;  height: 200px;  border: solid black 1px;  margin-bottom: 20px;}
.child-element {  -ms-flex: auto 1;  flex: 1;  background: grey;}
.child-element:nth-child(even) {  background: darkGrey;}

<div class="container-element">  <div class="child-element">    Dummy content  </div>  <div class="child-element">    Dummy content  </div>  <div class="child-element">    Dummy content  </div>  <div class="child-element">    Dummy content  </div></div>
<div class="container-element">  <div class="child-element">    Dummy content2  </div>  <div class="child-element">    Dummy content2  </div></div>