Css 显示 flex 环绕内容答案

【问题标题】：Css display flex wrap around contentCss 显示 flex 环绕内容
【发布时间】：2018-01-11 07:52:56
【问题描述】：

您能否将div display: flex 环绕其动态内容而不是跨越整个页面/容器？

在这个例子中，内容不是动态的，但我们假设它是：

$(document).ready(function() {
  dduCard("card", "Header", "Wrap around this content", "Footer");
});

function dduCard(targetDivId, cHeader, cBody, cFooter) {
  var targetDiv = $("#" + targetDivId);

  var mainDiv = $("<div id='placeholder'/>");
  var headerDiv = $("<div id='headerrow'/>");
  var bodyDiv = $("<div id='bodyrow' />");
  var footerDiv = $("<div id='footerrow'/>");
  mainDiv.css({
    border: "1px solid rgba(0,0,0,0.121569)",
    "border-radius": "4px",
    "box-sizing": "border-box",
    color: "rgb(41,43,44)",
    display: "flex",
    "flex-direction": "column",
    "font-size": "16px",
    "line-height": "24px",
    "text-align": "center"
  });

  headerDiv.css({
    "border-bottom-color": "rgba(0,0,0,0.121569)",
    "border-bottom-style": "solid",
    "border-bottom-width": "1px",
    "background-color": "rgb(247,247,249)",
    "border-radius": "3px 3px 0 0",
    display: "block",
    padding: "12px 20px"
  });
  bodyDiv.css({
    display: "block",
    "flex-basis": "auto",
    "flex-grow": "1",
    "flex-shrink": "1",
    "line-height": "24px",
    padding: "20px"
  });
  footerDiv.css({
    "border-top-color": "rgba(0,0,0,0.121569)",
    "border-top-style": "solid",
    "border-top-width": "1px",
    "background-color": "rgb(247,247,249)",
    "border-radius": "3px 3px 0 0",
    display: "block",
    padding: "12px 20px"
  });

  headerDiv.append(cHeader);
  bodyDiv.append(cBody);
  footerDiv.append(cFooter);

  //    append
  mainDiv.append(headerDiv).append(bodyDiv).append(footerDiv);
  targetDiv.append(mainDiv);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div id="card">
</div>

https://codepen.io/dumitrudan608/pen/eEdPVG

【问题讨论】：

下午 - 请将您的 codepen 添加为代码 sn-p。谢谢。
你想让容器占据所有剩余的高度，是吗？
一个元素默认环绕其内容...问题是什么？
codepen.io/sheriffderek/pen/87cf169b570e6b0fcdfd0c928ffcabee --- 我不确定你想做什么，但我相信你应该把大部分 JS 放在 CSS 中。

标签： javascript jquery css flexbox

【解决方案1】：

我不确定“环绕”是什么意思，但我查看了您提到的“引导卡” - 并修改了您的代码以符合要求。这有助于澄清问题吗？ https://codepen.io/sheriffderek/pen/87cf169b570e6b0fcdfd0c928ffcabee/?editors=0010

标记

<section class="cards">

  <ul class='card-list' id='card-list'>
    <!-- dynamic list items -->
  </ul>

</section>

CSS

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cards {
  max-width: 500px; /* arbitrary parent */
}

.card-list {

}

.card {
  border: 2px solid red;
}

.card:not(:first-of-type) {
  margin-top: 1rem; 
}

.card .row {
  padding: .5rem;
}

.card header {
  background: lightblue;
}

.card main {
  background: white;
}

.card footer {
  background: lightgreen;
}

脚本

var exampleData = [
  {
    id: 1,
    heading: "Card heading 1",
    body: "Card body 1",
    footer: "footer...",
  },
  {
    id: 2,
    heading: "Card heading 2",
    body: "Card body 2",
    footer: "footer...",
  },
  {
    id: 3,
    heading: "Card heading 3",
    body: "Card body 3",
    footer: "footer...",
  },
];

function buildCard(listName, headerCopy, mainCopy, footerCopy) {
  var $cardList = $('#' + listName);

  var $card = $("<li class='card'></li>");
  var $header = $("<header class='row header'></header>");
  var $main = $("<main class='row main'></main>");
  var $footer = $("<footer class='row footer'></footer>");

  // add content to rows
  $header.append(headerCopy);
  $main.append(mainCopy);
  $footer.append(footerCopy);

  // add rows to card
  $card.append($header).append($main).append($footer);
  $cardList.append($card);
}

$(document).ready( function() {

  // just to mock a server request for a 'list' of 'cards'
  exampleData.forEach( function(currentValue, currentIndex, fullArray) {
    var card = currentValue;
    buildCard('card-list', card.heading, card.body, card.footer);
  });

});

【讨论】：