草庐IT

html - 具有两列的 Flex 容器；第二列有四行

coder 2023-08-11 原文

我无法在 flex 中显示以下布局。我有 5 个盒子，我想将我的容器分成两部分，一个盒子垂直显示，另外 4 个垂直显示。

这是我的 CSS:

.trades, .trade-panel {
    flex: 1;
 }
.layout-4-5 {
    flex-direction: column;
}
.layout-4-5 > div {
    width: 50%;
}

然后我将第四个或最后一个 child 的基础设置为 100%。

.layout-4-5 > div:nth-child(1) {
    flex-basis: 100%;
}

这是我的 HTML

<div class="trades layout-4-5">
  <!--trade-panel are my individual boxes --->
  <div class="trade-panel">
    </div>

</div>

上面水平打印我的布局。考虑到我的 flex-direction 是 column 并且我的第一个 child 或盒子有 100% 的基础，这不应该打印我想要的吗？请提供任何帮助。

注意:由于框的大小相同，所以包含其他四个框的列应该更长，只要它们按照上面的排列就可以了。

最佳答案

我不是很清楚你的问题或代码。但这是一个通用的解决方案:

flex-container-1 {
    display: flex;                   /* establish flex container */
    flex-direction: row;             /* flex items will align horizontally */
    justify-content: center;         /* center flex items horizontally */
    align-items: center;             /* center flex items vertically */
    
    /* for demo purposes only */
    height: 250px;
    width: 400px;
    border: 1px solid #777;
    background-color: lightgreen;
}

flex-container-1 > flex-item {
    height: 90%;
    flex: 0 0 45%;                   /* <flex-grow> <flex-shrink> <flex-basis> */
    margin-right: 8px;               /* a bit of space between the centered items */
    border: 1px dashed #333;
    background-color: yellow;
}

flex-container-2 {
    height: 90%;
    flex: 0 0 45%;
    display: flex;                   /* flex item is now also flex container */
    flex-direction: column;          /* items will stack vertically */
    justify-content: space-between;  /* align items vertically */
}

flex-container-2 > flex-item {
    flex: 0 0 22%;
    border: 1px dashed #333;
    background-color: yellow;
}
<flex-container-1><!-- main container -->

    <flex-item></flex-item><!-- flex item #1 (first column) -->
    
    <flex-container-2><!-- flex item #2 / nested flex container (second column) -->
    
        <flex-item></flex-item>

        <flex-item></flex-item>

        <flex-item></flex-item>

        <flex-item></flex-item>

    </flex-container-2><!-- close nested container -->
    
</flex-container-1><!-- close main container -->

jsFiddle

关于html - 具有两列的 Flex 容器；第二列有四行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36784792/

四行容器flexcontainerflex-itemhtmlcssflexbox

有关html - 具有两列的 Flex 容器；第二列有四行的更多相关文章

  1. ruby - 具有身份验证的私有(private) Ruby Gem 服务器 - 2

    我想安装一个带有一些身份验证的私有(private)Rubygem服务器。我希望能够使用公共(public)Ubuntu服务器托管内部gem。我读到了http://docs.rubygems.org/read/chapter/18.但是那个没有身份验证-如我所见。然后我读到了https://github.com/cwninja/geminabox.但是当我使用基本身份验证(他们在他们的Wiki中有)时，它会提示从我的服务器获取源。所以。如何制作带有身份验证的私有(private)Rubygem服务器？这是不可能的吗？谢谢。编辑:Geminabox问题。我尝试“捆绑”以安装新的gem..

  2. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

  3. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

    在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这

  4. ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB？ - 2

    所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择

  5. ruby-on-rails - Ruby url 到 html 链接转换 - 2

    我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时，我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有，我有一些不错的正则表达式示例代码可以使用... 最佳答案 查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.

  6. ruby-on-rails - Rails 3.1 中具有相同形式的多个模型？ - 2

    我正在使用Rails3.1并在一个论坛上工作。我有一个名为Topic的模型，每个模型都有许多Post。当用户创建新主题时，他们也应该创建第一个Post。但是，我不确定如何以相同的形式执行此操作。这是我的代码:classTopic:destroyaccepts_nested_attributes_for:postsvalidates_presence_of:titleendclassPost...但这似乎不起作用。有什么想法吗？谢谢! 最佳答案 @Pablo的回答似乎有你需要的一切。但更具体地说...首先改变你View中的这一行对此#

  7. ruby-on-rails - 使用 ruby​​ 将多个实例变量转换为散列的更好方法？ - 2

    我收到格式为的回复#我需要将其转换为哈希值(针对活跃商家)。目前我正在遍历变量并执行此操作:response.instance_variables.eachdo|r|my_hash.merge!(r.to_s.delete("@").intern=>response.instance_eval(r.to_s.delete("@")))end这有效，它将生成{:first="charlie",:last=>"kelly"},但它似乎有点hacky和不稳定。有更好的方法吗？编辑:我刚刚意识到我可以使用instance_variable_get作为该等式的第二部分，但这仍然是主要问题。

  8. ruby-on-rails - capybara ::ElementNotFound:无法找到 xpath "/html" - 2

    我正在学习http://ruby.railstutorial.org/chapters/static-pages上的RubyonRails教程并遇到以下错误StaticPagesHomepageshouldhavethecontent'SampleApp'Failure/Error:page.shouldhave_content('SampleApp')Capybara::ElementNotFound:Unabletofindxpath"/html"#(eval):2:in`text'#./spec/requests/static_pages_spec.rb:7:in`(root)'

  9. ruby - 如何使用 Ruby 将 CSV 文件读入 HTML 表格？ - 2

    我正在尝试将一个简单的CSV文件读入HTML表格以在浏览器中显示，但我遇到了麻烦。这就是我正在尝试的:Controller:defshow@csv=CSV.open("file.csv",:headers=>true)end查看:输出:NameStartDateEndDateQuantityPostalCode基本上我只获取标题，而不会读取和呈现CSV正文。 最佳答案 这最终成为最终解决方案:Controller:defshow#OpenaCSVfile,andthenreaditintoaCSV::Tableobjectforda

  10. ruby - 具有两个参数的 block - 2

    我从用户Hirolau那里找到了这段代码:defsum_to_n?(a,n)a.combination(2).find{|x,y|x+y==n}enda=[1,2,3,4,5]sum_to_n?(a,9)#=>[4,5]sum_to_n?(a,11)#=>nil我如何知道何时可以将两个参数发送到预定义方法(如find)？我不清楚，因为有时它不起作用。这是重新定义的东西吗？ 最佳答案 如果您查看Enumerable#find的文档，您会发现它只接受一个block参数。您可以将它发送两次的原因是因为Ruby可以方便地让您根据它的“并行赋

随机推荐