如何居中flex容器，但左对齐flex项目 [英] How to center a flex container but left-align flex items
问题描述
我想让flex项目居中，但当我们有第二行，有5（从下面的图片）在1下，而不是在父中心。
Flexbox挑战与限制
面临的挑战是将一组弹性项目居中并左对齐。但是除非每行有固定数量的盒子，并且每个盒子都是固定宽度的，这是目前使用flexbox不可能的。
使用问题中发布的代码，我们可以创建一个包装当前flex容器（ ul ）的新的flex容器，这将允许我们将 ul 与 justify-content：center 。
然后 ul 的flex项目可以左对齐 justify-content ：flex-start 。
#container {
display：flex;
justify-content：center;
}
ul {
display：flex;
justify-content：flex-start;
}
这将创建一个居中的左对齐弹性项目组。
这种方法的问题是在某些屏幕尺寸下，在 ul 的右侧会有一个缺口，长出现在中心。
这发生是因为在flex布局（和实际上，CSS一般）容器：
- 不知道什么时候一个元素包装; / li>
- 不知道以前占用的空间现在为空，
- 不会重新计算其宽度以收缩包装较窄的布局。 / li>
右侧空格的最大长度是容器预期的flex项目的长度。
在下面的演示中，通过水平调整窗口大小，您可以看到空白来了。
a href =http://jsfiddle.net/8jqbjese/3/> DEMO
更实用的方法
所需的布局可以使用 inline-block 和媒体查询。
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空格;
查看http://stackoverflow.com/a/32801275/3597276 * /
}
li {
display：inline-block;
font-size：18px; / *恢复在容器中删除的字体大小* /
list-style-type：none;
width：150px;
height：50px;
line-height：50px;
margin：15px 25px;
box-sizing：border-box;
text-align：center;
}
@media屏幕和（max-width：430px）{ul {width：200px; }}
@media screen和（min-width：431px）和（max-width：630px）{ul {width：400px; }}
@media screen和（min-width：631px）and（max-width：830px）{ul {width：600px; }}
@media screen和（min-width：831px）和（max-width：1030px）{ul {width：800px; }}
@media screen和（min-width：1031px）和（max-width：1230px）{ul {width：1000px; }}
上面的代码用左对齐的子元素呈现一个水平居中的容器， / p>
其他选项
-
Masonry是一个JavaScript网格布局库。它
通过将元素放置在基于可用的
垂直空间的最佳位置来工作，类似于在墙上的石匠配合石头。您已经
可能已经在互联网上使用。
source： http://masonry.desandro.com/
-
这个CSS模块定义了一个二维的基于网格的布局系统，针对用户界面设计进行了优化。在网格布局模型中，网格容器的子项可以定位到预定义的灵活或固定大小布局网格中的任意位置。
来源： https://drafts.csswg.org/css-grid/ / p>
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:
- doesn't know when an element wraps;
- doesn't know that a previously occupied space is now empty, and
- 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.
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 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; } }
The above code renders a horizontally-centered container with left-aligned child elements like this:
Other Options
Properly sizing and aligning the flex item(s) on the last row
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.
这篇关于如何居中flex容器，但左对齐flex项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
