How do I create a row of justified elements with fluid spacing using CSS?

问题

How do I create a row of block elements with auto widths using text-align:justify, display: flex, column-count and/or other CSS properties?

回答1:

Use the following components:

A text-align:justify container for the row
An inline-block container for each column
An inline-block placeholder with width:100% to stretch the inside

    /*Row container is justified*/
    #container { width: 100%; text-align: justify; }

    /*Column container and placeholder are inline-block*/
    object, span { display: inline-block; }

    /*Placeholder is stretched to enforce shrink-wrapping*/
    span { width: 100%; }

 
      <!--row-->
      <div id="container">
        <!--column-->
        <object>
          <!--content-->
          <div>
          foo
          </div>
        </object>
        <object>
          <div>
          bar
          </div>
        </object>
        <object>
          <div>
          baz
          </div>
        </object>
        <object>
          <div>
          bop
          </div>
        </object>
        <object>
          <div>
          bip
          </div>
        </object>
        <!--placeholder-->
        <span></span>
      </div>

Or use a text-align:justify container with a nested inline-block and column-count row where column-count is a number equal to the number of child elements:

#main, #container { width: 100%; }
#main { text-align: justify; }
#container { display:inline-block; } 
#container { -moz-column-count: 5; -webkit-column-count: 5; column-count: 5;}

<!--full width container-->
<div id="main">

<!--justified inline-block row-->
  <div id="container">
     <!--columns-->
      <div>
      foo
      </div>
      <div>
      bar
      </div>
      <div>
      baz
      </div>
      <div>
      bop
      </div>
      <div>
      bip
      </div>
  </div>
</div>

Or a full-width container with display:flex; flex-direction: row and columns with flex:auto:

#flex-container {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: row;
	flex-direction: row;
  width: 100%;
}

#flex-container > .flex-item {
	-webkit-flex: auto;
	flex: auto;
}

<div id="flex-container">
    <div class="flex-item">Foo</div>
    <div class="flex-item">Bar</div>
    <div class="flex-item">Baz</div>
    <div class="flex-item">Bop</div>
    <div class="flex-item">Bip</div>
</div>

Or display:grid with auto for each column in grid-template-columns and justify-content: space-between:

#grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto auto;
  justify-content: space-between;
  }

    <div id="grid-container">
        <div>Foo</div>
        <div>Bar</div>
        <div>Baz</div>
        <div>Bop</div>
        <div>Bip</div>
    </div>

Or display: inline-grid with auto for each column in grid-template-columns and text-align: justify:

#grid-container {
  display: inline-grid;
  grid-template-columns: auto auto auto auto auto;
  width: 100%;
  text-align: justify;
  }

    <div id="grid-container">
        <div>Foo</div>
        <div>Bar</div>
        <div>Baz</div>
        <div>Bop</div>
        <div>Bip</div>
    </div>

block-level element generates a principal block-level box that contains descendant boxes and generated content and is also the box involved in any positioning scheme.

Some block-level elements may generate additional boxes in addition to the principal box: 'list-item' elements. These additional boxes are placed with respect to the principal box.

non-replaced inline blocks and non-replaced table cells are block containers but not block-level boxes.

Inline-level boxes that are not inline boxes (such as replaced inline-level elements, inline-block elements, and inline-table elements) are called atomic inline-level boxes because they participate in their inline formatting context as a single opaque box.

When the total width of the inline-level boxes on a line is less than the width of the line box containing them, their horizontal distribution within the line box is determined by the 'text-align' property. If that property has the value 'justify', the user agent may stretch spaces and words in inline boxes (but not inline-table and inline-block boxes) as well.

References

CSS 2.1: Visual Formatting Model
Justify Grid
CSS Basic Box Model
CSSPlay: Basic Flex Box Holy Grail Layout with Sticky Footer
CSS Features for Adaptive Layouts
Equidistant Objects with CSS | CSS-Tricks
How to use CSS3 columns | Webdesigner Depot
Difference between inline box and atomic inline box
What's the difference between a block-level box and a principal block-level box?
Inline- and block-level boxes inside the block-container box

回答2:

you can try this:

use the text-align:justify to the container;
use the :after to the container;
use display:inline-block to the column;
add some break before at the last;

HTML

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
  <li>13</li>
  <li>14</li>
  <li class="break"></li>
  <li class="break"></li>
  <li class="break"></li>
  <li class="break"></li>
</ul>

CSS

ul {
  list-style: none outside none;
  margin:0;
  padding: 0;

  text-align: justify;
  font-size: 0.1px; /*hide whitespace between elements*/
}
ul:after{
  content: '';
  display: inline-block;
  width: 100%;
}
li {
  display: inline-block;
  width: 200px;
  height: 200px;
  background: hsla(20,50%,85%,09);
  padding: 0;
  margin: 10px;

}
.break {
   height: 0;
}

please view the demo.More details please click here.

来源：https://stackoverflow.com/questions/14027385/how-do-i-create-a-row-of-justified-elements-with-fluid-spacing-using-css

标签

css

cross-browser

fluid-layout

multiple-columns

justify