html – 如何集中一个flex容器,但左对齐flex项目

概述我想要flex项目居中，但是当我们有第二行时，要有5(从下面的图像)到1以下，而不是在父中心。 这是我所拥有的一个例子： ul { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; margin: 0; padding: 0;}li { list-style-t 我想要flex项目居中，但是当我们有第二行时，要有5(从下面的图像)到1以下，而不是在父中心。

这是我所拥有的一个例子：

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挑战赛局限性

挑战是将一组柔性物品放在一起，并将其放在包装上。但是，除非每行有固定数量的框，并且每个框都是固定宽度的，所以当前不可能使用flexBox。

使用问题中发布的代码，我们可以创建一个新的Flex容器来包装当前的flex容器(ul)，这将允许我们使用justify-content：center来居中。

然后，ul的flex项可以对齐内容：flex-start。

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

这将创建一个居中的左对齐的Flex项目组。

这种方法的问题是，在某些屏幕尺寸上，ul的右侧将存在间隙，使其不再显示为居中。

这是因为在flex布局(和实际上，一般的CSS)容器中：

>不知道元素何时包裹;
>不知道以前占用的空间现在是空的，而且
>不重新计算其宽度以缩小更窄的布局。

右侧的空格的最大长度是容器期望在那里的flex项目的长度。

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

DEMO

一个更实际的方法

使用内嵌块和媒体查询的flexBox可以实现所需的布局。

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 http://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; } }

上面的代码渲染一个左对齐的子元素的水平中心的容器，如下所示：

DEMO

其他选项

> 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: 07007}

> 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: 07009}

总结

以上是内存溢出为你收集整理的html – 如何集中一个flex容器,但左对齐flex项目全部内容，希望文章能够帮你解决html – 如何集中一个flex容器,但左对齐flex项目所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。