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-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
> CSS Grid Layout Module Level 1
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |