父级中对齐的内联块元素

Question

I have a container with a width of 1200px and 4 inline-block children of 250px width each.

Is there anyway I can justify them inside the parent? For example I would like the first element to have no margin on the left and the last element to have no margin on the right, and the margin between the elements to be equal.

Answer 1

Use display flex on the container

.container { 
   display:flex; /* make the container a flex container */
   justify-content: space-between /* justify the flex items on the main axis */
}

See the spec for more detials

Answer 2

Of course, using flexbox:

HTML

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

CSS

.parent{
    display:flex;
    flex-direction: row;
    justify-content: space-between;
}

Learn more about flexbox

You can also try:

HTML the same as above

CSS

.parent{
   display:table
}

.parent > .child{
   display: table-cell;
   float: none;
}