如何适应div的宽度与flexbox的内容 [英] How to adapt div's width to content with flexbox

问题描述

我想让 .flexrow div的宽度适应内容，但是我不能用flex来设置。

HTML

 < div class =fullwidth> 
< div class =sidebar> 
< p>边栏< / p> 
< p>边栏< / p> 
< p>边栏< / p> 
< p>边栏< / p> 
< p>边栏< / p> 
< p>边栏< / p> 
< / div> 
< div class =center> 
< div class =flexrow> 
< div class =card> 
< p>卡< / 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; 
} 
  

我创建了一个片段

任何建议吗？

解决方案

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

标记，这里是一个简单的修复，在2个步骤来实现：

1. 添加 justify-content：中心; 您的 .flexrow 规则




2. 需要少一个 ghost 元素将最后一行的元素一直推到左边。所添加的元素与新的 .flexrow .card：empty 规则一起使用会发挥很大的作用。
   
   

     .flexrow .card：空{
    height：0; 
    margin：0 10px; 
    padding：0 10px; 
    
    
    
    
    
    
    
    
    $ b $ < https://codepen.io/anon/pen/jLEgWL =nofollow noreferrer>更新了codepen  
    
    
    
    Stack snippet 
    
    
    
    
    
    
     .fullwidth {background-color：grey; display：flex;}。sidebar {flex：0 0 280px; margin：10px;填充：10px;背景色：黑色; color：white;}。flexrow {display：flex; flex-wrap：wrap; align-content：center; justify-content：center;}。flexrow .card {width：300px;身高：60px;背景颜色：红色; margin：10px;填充：10px; text-align：center;}。flexrow .card：empty {height：0; margin：0 10px; padding：0 10px;}  

   < div class =全角> < div class =sidebar> < p为H.侧边栏< / p为H. < p为H.侧边栏< / p为H. < p为H.侧边栏< / p为H. < p为H.侧边栏< / p为H. < p为H.侧边栏< / p为H. < p为H.侧边栏< / p为H. < / DIV> < div class =center> < div class =flexrow> < div class =card> < p为H.卡和LT; / p为H. < / DIV> < div class =card> < p为H.卡和LT; / p为H. < / DIV> < div class =card> < p为H.卡和LT; / p为H. < / DIV> < div class =card> < p为H.卡和LT; / p为H. < / DIV> < div class =card> < p为H.卡和LT; / p为H. < / DIV> < div class =card> < p为H.卡和LT; / p为H. < / DIV> < div class =card> < p为H.卡和LT; / p为H. < / DIV> <！ - 幻影元素，如果最大列数是4，则需要3个 - > < div class =card>< / div> < div class =card>< / div> < div class =card>< / div> < / DIV> < / div>< / div>

I want adapt the .flexrow div's width to content but i can't set it with flex.

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;
}

I have created a snippet here

This is an example of what i want:

Any suggestion?

解决方案

The main problem here is that when an item wrap, whether one use Flexbox or not, its container won't adjust its width to the new content width.

With the existing markup, here is a simple fix in 2 steps to achieve that:

1. Add justify-content: center; to your .flexrow rule

2. For every possible column you need one less ghost element to push elements on the last row all the way to the left. The added elements together with new .flexrow .card:empty rule will do the magic.

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

Updated codepen

Stack snippet

.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>

这篇关于如何适应div的宽度与flexbox的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！