具有最小宽度并适应内容的Flexbox项目

Question

我想使flexbox响应内容项。 这是示例代码：

HTML：

.container {
  width: 200px;
  height: 400px;
  display: flex;
  flex-flow: row wrap;
}

.item {
  flex-basis: 40px;
  background-color: orange;
  margin: 0 10px 10px 0;
}

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item">this is text content and again and again this is text content and again and again</div>
</div>

这是我想要实现的：

如何实现这种行为？谢谢！）

Answer 1

如果您希望页面响应不同的分辨率，那么您就不应该习惯以 px 来定义高度和宽度。

相反，尝试将宽度和高度的百分比表示为％，以％定义的宽度趋于随分辨率而变化，但以 px 定义的宽度趋于保持静态且对更改分辨率不敏感。

试试这个

.container {
  width: 800px;
    height: 400px;
    display: flex;
    flex-flow: row wrap;	
}

.item {
  flex-basis: 25%;
    background-color: orange;
    margin: 0 10px 10px 0;
    height: 50%;
}
.items {
  flex-basis: 51%;
    background-color: orange;
    margin: 0 10px 10px 0;
    height: 50%;
}

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="items">this is text content and again and again this is text content and again and again</div>
  <div class="item"></div>
</div>

这很好。一切顺利

Answer 2

您是否对Flexbox有强大的依恋？使用bootstrap grid会非常容易。 （我看到您有容器类，因此您可能已经安装了引导程序）

submitHandler: function(form){
    var formData = new FormData(form);
    $.ajax({
        url: baseUrl + "/AddMember/addMembers",
        type: 'POST',
        data: formData, 
        dataType: 'json',
        processData: false,
        contentType: false,
        ....

如果您不喜欢使用引导程序，那么CSS3现在具有本机grid layout，它也应适合您的用途。

根据您的情况，我认为这是应该走的路。 Flexbox是一种很棒的布局，但是它对于动态显示意味着更多，您不需要精确控制商品的大小/尺寸。

Answer 3

您可以添加一个类，例如extra。

并向其中添加max-width:max-content;的assign属性。

.container {
  display: flex;
  width: 300px;
  height: 300px;
  flex-wrap: wrap;
  border: 2px solid red;
}

.item {
  flex: 1;
  min-width: calc(100px - 10px);
  max-width: calc(100px - 10px);
  height: calc(100px - 10px);
  margin: 5px;
  background: green;
}

.extra {
  max-width: max-content !important;
  max-width: -moz-fit-content !important;
  color: white;
}

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item extra">this is extra text and expands</div>
  <div class="item"></div>
</div>