Html 如何将flex容器居中但将flex项目左对齐

我希望flex项目居中，但当我们有第二行时，在1下有5（从下图），而不是在父项居中

以下是我所拥有的一个例子：

ul{
显示器：flex；
弯曲方向：行；
柔性包装：包装；
证明内容：中心；
保证金：0；
填充：0；
}
李{
列表样式类型：无；
边框：1px纯色灰色；
利润率：15px；
填充物：5px；
宽度：200px；
}

一,
二,
三,
四,
五,
六,

Flexbox挑战与限制 挑战在于将一组弹性物品居中，并在包装上左对齐。但是，除非每行有固定数量的框，并且每个框的宽度是固定的，否则这在flexbox中是不可能的

使用问题中发布的代码，我们可以创建一个新的flex容器来包装当前flex容器（

ul

），这将允许我们使用

justify content:center

将

ul

置于中心

然后，

ul

的弹性项可以与

justify content:flex start

左对齐

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

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

这将创建一组居中的左对齐弹性项

这种方法的问题是，在某些屏幕尺寸下，

ul

右侧会有一个间隙，使其不再居中显示

这是因为在flex布局（实际上是CSS）中，容器：

不知道元素何时换行

不知道以前占用的空间现在是空的，并且

不会重新计算其宽度以收缩包裹较窄的布局

右边空白的最大长度是容器期望存在的flex项的长度

在下面的演示中，通过水平调整窗口大小，您可以看到空白的出现和消失

---

更实际的方法 使用

内联块

和媒体查询，无需flexbox即可实现所需布局

HTML

上面的代码呈现具有左对齐子元素的水平居中容器，如下所示：

---

其他选择

• 砌体是一个JavaScript网格布局库。信息技术 工作原理是根据可用数据将图元放置在最佳位置 垂直空间，有点像石匠在墙上安装石头。你已经 可能在互联网上都看到了
  资料来源：

• 该CSS模块定义了一个基于二维网格的布局系统，针对用户界面设计进行了优化。在网格布局模型中，可以将网格容器的子对象定位到预定义的灵活或固定大小布局网格中的任意插槽中
  资料来源：

---

正如@michael所建议的，这是当前flexbox的一个限制。但是如果您仍然想使用

flex

和

调整内容：中心

，然后我们可以通过添加一个伪

li

元素并分配

左边距来解决这个问题

    const handleResize = () => {
        const item_box = document.getElementById('parentId')
        const list_length  = item_box.clientWidth
        const product_card_length = 200 // length of your child element
        const item_in_a_row = Math.round(list_length/product_card_length)
        const to_be_added = item_in_a_row - parseInt(listObject.length % item_in_a_row) // listObject is the total number items
        const left_to_set = (to_be_added - 1 ) * product_card_length // -1 : dummy item has width set, so exclude it when calculating the left margin 
        const dummy_product = document.querySelectorAll('.product-card.dummy')[0]
        dummy_product.style.marginLeft = `${left_to_set}px`
    }
    handleResize() // Call it first time component mount
    window.addEventListener("resize", handleResize); 

选中此项或
获取所需样式和边距的一种方法是执行以下操作：

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

#innercontainer {
    display: flex;
    flex: 0.9; -> add desired % of margin
    justify-content: flex-start;
}

您可以使用CSS网格实现它，只需使用
repeat（autofit，minmax（元素宽度，最大内容））


ul{
显示：网格；
网格模板列：重复（自动拟合，最小值（210px，最大内容））；
栅隙：16px；
证明内容：中心；
填充：初始；
}
李{
列表样式类型：无；
边框：1px纯色灰色；
填充物：5px；
宽度：210px；
}

一,
二,
三,
四,
五,
六,
七,
我在使用React Native进行编码时遇到了这个问题。有一个优雅的解决方案，您可以使用FlexBox。在我的特殊情况下，我尝试使用alignItems将三个flex Box（flex:2）放在另一个flex Box的中心。我提出的解决方案是使用两个空的s，每个s都带有Flex:1

<View style={{alignItems: 'center', flexWrap: 'wrap', flexDirection: 'row'}}>
  <View style={{flex: 1}} />
    // Content here
  <View style={{flex: 1}} />
</View>


//满足于此

转换为web/CSS非常简单。
您可以将不可见元素放置在与其他元素相同的类中（出于退出目的在示例中删除），并将高度设置为0。这样，您就可以从网格的一开始就对项目进行调整

例子

表1

20美元

结果
我在尝试将flex中的内容放在中心位置时遇到了类似的问题。我尝试了很多技巧和修复，但由于一个愚蠢的错误，它根本不起作用

如果来这里的任何人即使在阅读了这些答案后也无法回避这个问题，那么试着检查是否有愚蠢的错误。在我的例子中，它是一个
span
，其中
flex grow
设置为
1
作为间隔添加。
是的，人们想要做的很多事情，最终使用flexbox for实际上只是创建一个网格。幸运的是，当达到更最终的状态时，CSS网格将覆盖这一点。链接到您的。我还有一个版本在那里如何解决同样的问题，尽管如此，这可能是一个骗局，所以看看，并决定自己，如果你想关闭它这样。加上1，这是一个很好的解释。也许另一个想法是在父包装器上执行
margin:0 auto
，这样所有内容都集中在页面上。从这一点开始，所有子组件（即第一个flex容器）都只是进行正常的流行过程？看起来这件事很简单，很有趣。但不能消除右侧或中间的间隙grid@Red有一件事错了。我将
justify items:center
更改为
justify content:center
，现在它完全居中了。我不理解
minmax
中的
210px
部分。我如何做到同样，但没有人为的限制
#container {
    display: flex;
    justify-content: center;
}

#innercontainer {
    display: flex;
    flex: 0.9; -> add desired % of margin
    justify-content: flex-start;
}

<View style={{alignItems: 'center', flexWrap: 'wrap', flexDirection: 'row'}}>
  <View style={{flex: 1}} />
    // Content here
  <View style={{flex: 1}} />
</View>

<div class="table-container">
  <div class="table-content">
    <p class="table-title">Table 1</p>
    <p class="mesa-price">$ 20</p>
  </div>
  
  <!-- Make stuff justified start -->
  <div class="table-content" style="opacity: 0; cursor: default; height: 0; margin-bottom: 0;"></div>
  <div class="table-content" style="opacity: 0; cursor: default; height: 0; margin-bottom: 0;"></div>
  <div class="table-content" style="opacity: 0; cursor: default; height: 0; margin-bottom: 0;"></div>
  <div class="table-content" style="opacity: 0; cursor: default; height: 0; margin-bottom: 0;"></div>
</div>