如何居中弹性容器但左对齐弹性项目 [英] How to center a flex container but left-align flex items

问题描述

我希望 flex 项目居中，但是当我们有第二行时，在 1 下有 5 个(来自下图)而不是在父项中居中.

这是我所拥有的示例:

ul {显示:弹性；弹性方向:行；flex-wrap: 包裹;对齐内容:居中；边距:0；填充:0；}李{列表样式类型:无；边框:1px纯灰色；边距:15px；填充:5px；宽度:200px；}

<li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li>

发生这种情况是因为在 flex 布局(实际上，通常是 CSS)中的容器:

1. 不知道元素何时换行；
2. 不知道以前占用的空间现在是空的，并且
3. 不会重新计算其宽度以收缩包裹较窄的布局.

右边空白的最大长度是容器期望在那里的弹性项目的长度.

在下面的演示中，通过水平调整窗口大小，您可以看到空白来来去去.

演示

<小时>

其他选项

• 在最后一行正确调整和对齐弹性项目的大小

• 德桑德罗砌体

  <块引用>

  Masonry 是一个 JavaScript 网格布局库.它通过根据可用将元素放置在最佳位置来工作垂直空间，有点像石匠在墙上安装石头.你已经可能在互联网上看到它在使用.

  ^{来源:http://masonry.desandro.com/}

• CSS 网格布局模块级别 1

  <块引用>

  这个 CSS 模块定义了一个基于二维网格的布局系统，针对用户界面设计进行了优化.在网格布局模型中，网格容器的子项可以放置在预定义的灵活或固定大小的布局网格中的任意槽中.

  ^{来源:https://drafts.c​​sswg.org/css-grid/}

I want the flex items to be centered but when we have a second line, to have 5 (from image below) under 1 and not centered in the parent.

Here's an example of what I have:

ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0;
  padding: 0;
}
li {
  list-style-type: none;
  border: 1px solid gray;
  margin: 15px;
  padding: 5px;
  width: 200px;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

http://jsfiddle.net/8jqbjese/2/

解决方案

Flexbox Challenge & Limitation

The challenge is to center a group of flex items and left-align them on wrap. But unless there is a fixed number of boxes per row, and each box is fixed-width, this is currently not possible with flexbox.

Using the code posted in the question, we could create a new flex container that wraps the current flex container (ul), which would allow us to center the ul with justify-content: center.

Then the flex items of the ul could be left-aligned with justify-content: flex-start.

#container {
    display: flex;
    justify-content: center;
}

ul {
    display: flex;
    justify-content: flex-start;
}

This creates a centered group of left-aligned flex items.

The problem with this method is that at certain screen sizes there will be a gap on the right of the ul, making it no longer appear centered.

This happens because in flex layout (and, actually, CSS in general) the container:

1. doesn't know when an element wraps;
2. doesn't know that a previously occupied space is now empty, and
3. doesn't recalculate its width to shrink-wrap the narrower layout.

The maximum length of the whitespace on the right is the length of the flex item that the container was expecting to be there.

In the following demo, by re-sizing the window horizontally, you can see the whitespace come and go.

DEMO

---

A More Practical Approach

The desired layout can be achieved without flexbox using inline-block and media queries.

HTML

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

CSS

ul {
    margin: 0 auto;                  /* center container */
    width: 1200px;
    padding-left: 0;                 /* remove list padding */
    font-size: 0;                    /* remove inline-block white space;
                                        see https://stackoverflow.com/a/32801275/3597276 */
}

li {
    display: inline-block;
    font-size: 18px;                 /* restore font size removed in container */
    list-style-type: none;
    width: 150px;
    height: 50px;
    line-height: 50px;
    margin: 15px 25px;
    box-sizing: border-box;
    text-align: center;
}

@media screen and (max-width: 430px) { ul { width: 200px; } }
@media screen and (min-width: 431px) and (max-width: 630px) { ul { width: 400px; } }
@media screen and (min-width: 631px) and (max-width: 830px) { ul { width:600px;  } }
@media screen and (min-width: 831px) and (max-width: 1030px) { ul { width: 800px; } }
@media screen and (min-width: 1031px) and (max-width: 1230px) { ul { width: 1000px; } }

The above code renders a horizontally-centered container with left-aligned child elements like this:

DEMO

---

Other Options

• Properly sizing and aligning the flex item(s) on the last row

• Desandro Masonry

  Masonry is a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You’ve probably seen it in use all over the Internet.

  ^{source: http://masonry.desandro.com/}

• CSS Grid Layout Module Level 1

  This CSS module defines a two-dimensional grid-based layout system, optimized for user interface design. In the grid layout model, the children of a grid container can be positioned into arbitrary slots in a predefined flexible or fixed-size layout grid.

  ^{source: https://drafts.csswg.org/css-grid/}

这篇关于如何居中弹性容器但左对齐弹性项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！