如何使div的宽度适应flexbox的内容

我想修改.flexrow div的宽度内容，但我无法使用flex进行设置。如何使div的宽度适应flexbox的内容

HTML

<div class="fullwidth"> 
    <div class="sidebar"> 
    <p>sidebar</p> 
    <p>sidebar</p> 
    <p>sidebar</p> 
    <p>sidebar</p> 
    <p>sidebar</p> 
    <p>sidebar</p> 
    </div> 
    <div class="center"> 
    <div class="flexrow"> 
     <div class="card"> 
     <p>card</p> 
     </div> 
    </div> 
    </div> 
</div>

CSS

.center { 
    display: flex; 
    justify-content: center; 
} 

.flexrow { 
    display: inline-flex; 
    flex-direction: row; 
    flex-wrap: wrap; 
} 

.flexrow .card { 
    width: 300px; 
    height: 60px; 
    background-color: red; 
    margin: 10px; 
    padding: 10px; 
    text-align: center; 
}

我创建了一个片段here

这是我想要的一个例子：

什么建议吗？

来源

2017-07-26 SaroVin

div'你指的是哪一个'？ – sol

你想达到什么目的？每个红色块只与其中的文本一样宽？ –

对不起，我想对齐'.flexrow' div – SaroVin

主要的问题在这里是当一个项目包，无论是一个使用Flexbox的与否，其容器不会调整它的宽度新的内容宽度。

与现有的标记，这里是2个步骤的简单修复，以实现这一目标：

添加justify-content: center;到您的.flexrow规则
对于你需要一个都不能少鬼每一个可能的列元素将最后一行中的元素一直推到左侧。添加的元素与新的.flexrow .card:empty规则一起会发挥魔力。
```
.flexrow .card:empty { 
    height: 0; 
    margin: 0 10px; 
    padding: 0 10px; 
} 
```

Updated codepen

栈片断

.fullwidth { 
 
    background-color: grey; 
 
    display: flex; 
 
} 
 

 
.sidebar { 
 
    flex: 0 0 280px; 
 
    margin: 10px; 
 
    padding: 10px; 
 
    background-color: black; 
 
    color: white; 
 
} 
 

 
.flexrow { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    align-content: center; 
 
    justify-content: center; 
 
} 
 

 
.flexrow .card { 
 
    width: 300px; 
 
    height: 60px; 
 
    background-color: red; 
 
    margin: 10px; 
 
    padding: 10px; 
 
    text-align: center; 
 
} 
 

 
.flexrow .card:empty { 
 
    height: 0; 
 
    margin: 0 10px; 
 
    padding: 0 10px; 
 
}

<div class="fullwidth"> 
 
    <div class="sidebar"> 
 
    <p>sidebar</p> 
 
    <p>sidebar</p> 
 
    <p>sidebar</p> 
 
    <p>sidebar</p> 
 
    <p>sidebar</p> 
 
    <p>sidebar</p> 
 
    </div> 
 
    <div class="center"> 
 
    <div class="flexrow"> 
 
     <div class="card"> 
 
     <p>card</p> 
 
     </div> 
 
     <div class="card"> 
 
     <p>card</p> 
 
     </div> 
 
     <div class="card"> 
 
     <p>card</p> 
 
     </div> 
 
     <div class="card"> 
 
     <p>card</p> 
 
     </div> 
 
     <div class="card"> 
 
     <p>card</p> 
 
     </div> 
 
     <div class="card"> 
 
     <p>card</p> 
 
     </div> 
 
     <div class="card"> 
 
     <p>card</p> 
 
     </div> 
 

 
     <!-- Ghost elements, if max columns is 4 one need 3 --> 
 
     <div class="card"></div> 
 
     <div class="card"></div> 
 
     <div class="card"></div> 
 

 
    </div> 
 
    </div> 
 
</div>

来源

2017-07-26 09:12:20 LGSon

我怎么算列？ – SaroVin

@SaroVin你只需添加幽灵元素_enough_。请注意，许多人不会有任何区别 – LGSon

@SaroVin这里的主要问题是，当一个项目包装，无论是否使用Flexbox，其容器不会将其宽度调整到新的内容宽度，因此不会出现以你想要的方式为中心。我展示的技巧是如何用CSS解决这个问题。另一种方法是使用脚本 – LGSon

尝试这个代码示例

.flexrow .card { 
    height: 60px; 
    background-color: red; 
    margin: 10px; 
    padding: 10px; 
    text-align: center; 
}

我除去宽度，以便flexrow能适应的内容。这是你想要的吗？如果不是，请注明（？也许图片）

来源

2017-07-26 08:13:14

我想你想要的是，如果你想补充工具栏，并通过您需要在fullwidth DIV使用flex并排的内容，检查下面的代码：

.sidebar { 
 
    background: black; 
 
    color: white; 
 
} 
 

 
.fullwidth { 
 
    display: flex; 
 
} 
 

 
.center { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items:center; 
 
    width:100%; 
 
} 
 

 
.flexrow { 
 
    display: inline-flex; 
 
    flex-direction: row; 
 
    flex-wrap: wrap; 
 
    width:100%; 
 
} 
 

 
.flexrow .card { 
 
    width: calc(33.33% - 20px); 
 
    box-sizing:border-box; 
 
    height: 60px; 
 
    background-color: red; 
 
    margin: 10px; 
 
    padding: 10px; 
 
    text-align: center; 
 
}

<div class="fullwidth"> 
 
    <div class="sidebar"> 
 
    <p>sidebar</p> 
 
    <p>sidebar</p> 
 
    <p>sidebar</p> 
 
    <p>sidebar</p> 
 
    <p>sidebar</p> 
 
    <p>sidebar</p> 
 
    </div> 
 
    <div class="center"> 
 
    <div class="flexrow"> 
 
     <div class="card"> 
 
     <p>card</p> 
 
     </div> 
 
     <div class="card"> 
 
     <p>card</p> 
 
     </div> 
 
     <div class="card"> 
 
     <p>card</p> 
 
     </div> 
 
     <div class="card"> 
 
     <p>card</p> 
 
     </div> 
 
     <div class="card"> 
 
     <p>card</p> 
 
     </div> 
 
     <div class="card"> 
 
     <p>card</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

来源

2017-07-26 08:23:51

这个例子不工作... – SaroVin

@SaroVin在哪个意义上它不工作？你可以说得更详细点吗？ –

flexrow div没有完全对齐 – SaroVin

UPDATE

试试这个：

.flexrow { 
    width: 90%; 
    display: inline-flex; 
    flex-direction: row; 
    flex-wrap: wrap; 
    -webkit-align-content: center; 
    align-content: center; 
    -webkit-justify-content: space-between; 
    justify-content: space-between; 
    margin: 0 auto; 
} 
.flexrow:after { 
    content: ""; 
    width: 300px; 
    margin: 10px; 
    padding: 10px; 
    text-align: center;  
}

希望你在找什么:)

来源

2017-07-26 08:30:14

是的，但'flexrow' div没有完全对齐 – SaroVin

@SaroVin你可以为'.flexrow'设置更正确的宽度，如果你想水平对齐项目，它应该可以正常工作 –

...和/或玩利润 –

如何使div的宽度适应flexbox的内容

回答

相关问题