Flexbox 列对齐项目的宽度相同但没有包装器居中（仅限 css）

Posted 2023-03-05

【中文标题】Flexbox 列对齐项目的宽度相同但没有包装器居中（仅限 css）

【英文标题】：Flexbox column align items same width but centered without wrapper (css-only)

【发布时间】：2017-02-08 19:45:26

【问题描述】：

这是一个移动菜单，当然需要响应式。

最长的孩子应该设置所有其他孩子的宽度

.index 需要是全宽和全高并带有背景色。

仅限 CSS，请

我想解决这个问题没有额外的包装。

---

我的代码：

.index 
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column; /* main-axis vertical */
  justify-content: center; /* main-axis alignment */
  align-items: center; /* neither center nor stretch produce desired result */

.index a 
  /* nothing important here */

<div class="index">
  <a href="">Some item</a>
  <a href="">Some other item</a>
  <a href="">This one long item</a>
  <a href="">Overview</a>
  <a href="">Contact</a>
</div>

---

到目前为止我尝试了什么：

父级 (.index) 或子级 (a) 上的百分比填充从未使整个包完美居中 在项目上使用了最大宽度，但是 ...

我想解决这个问题不需要额外的包装器。

在过去的几个月里，我发现了很多关于原生 flexbox 行为的事情，我想知道并希望它也能处理这个用例。

【问题讨论】：

您是否尝试过使用padding 属性？

正如我所指出的，我尝试在父 .index 和子 a 上进行填充，但从未在多个视口宽度上完全居中对齐整个框。但我可能是错的。

基本上，这对于没有包装器的 flexbox 是不可能的。

@Paulie_D，你伤了我的心3

【参考方案1】：

为什么不直接删除 flex 选项：

body,
html 
  height: 100%;
  padding: 0;
  margin: 0;

.index 
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-block;

.index > a 
  display: block;

.index:after 
  left:50%; 
  top:50%;
  content: '';
  display: block;
  position: fixed;
  width:100vw;
  height:100vh;
  transform: translate(-50%, -50%);
  z-index: -1;
  background: #525252;

<div class="index">
  <a href="">Some item</a>
  <a href="">Some other item</a>
  <a href="">This one long item</a>
  <a href="">Overview</a>
  <a href="">Contact</a>
</div>

【讨论】：

我需要全屏背景。抱歉没提。

嗯，那么我认为没有额外的包装是不可能的

太糟糕了......这可能很容易......align-items: match繁荣！

我发现了一个使用伪元素的 hack！看看

为什么是背景图片？

【参考方案2】：

试试下面的 HTML 或 CSS 代码：

.index 
    background-color: #525252;
    position: fixed; top: 0; left: 0;
    width: 100%; height: 100%;

    display: flex; flex-direction: column; // main-axis vertical 
    justify-content: center; // main-axis alignment
    align-items: center; // neither center nor stretch produce desired result

    a 
        ... // nothing important here 
    

.index ul 
  background-color: #5c7343;
  color: #b0c696;
  float: none;
  list-style-type: square;
  margin: auto;
  padding: 0 5px 0 15px;

.index ul li 
  padding: 3px 0;

.index ul li a 
  color: #b0c696;
  text-decoration: none;
  width: 100%;

<div class="index">
  <ul>
    <li><a href="">Some item</a></li>
    <li><a href="">Some other item</a></li>
    <li><a href="">This one long item</a></li>
    <li><a href="">Overview</a></li>
    <li><a href="">Contact</a></li>
  </ul>
</div>

【讨论】：

虽然你的 sn-p 不是我需要的，但ul 是可能的。但这是我要避免的包装器。