草庐IT

flex布局（弹性盒子一）

手可摘星辰^v^ 2025-02-02 原文

目录

一、弹性盒子的开启

二、弹性盒子的不同样式

1.flex-direction：子项目的排列方向

2.flex-wrap：子项目多行

3. flex-flow 是flex-direction和flex-wrap的一起指定（简写）

一、弹性盒子的开启

设置内容区的样式：
   .container{
            display: flex;
        }
内容区：
 <div class="container">
        <div class="item1">1</div>
        <div class="item2">2</div>
    </div>

这样弹性盒子就开启了

二、弹性盒子的不同样式

1.flex-direction：子项目的排列方向

a.  row 正常（默认值）

  设置内容区的样式 
   .container{
             display: flex;
            flex-direction:row;
            width: 500px;
            height: 500px;
            border: 1px red solid;
        }
        .item{
            width: 100px;
            height: 100px;
            background-color: red;
            margin: 10px;
            border: 1px orange solid;
        }
内容区：
   <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">2</div>
    </div>

如图所示： 开启了弹性盒子后，设置属性flex-direction再设置属性值row以后，盒子是正常排列的

b. row-reverse 反方向（从右向左）

意思是设置了属性值为row-reverse后，盒子就会反方向排列，即从右向左排列

c. column 从上向下

意思是设置了属性值为column后，盒子会从上向下排列，从最左最顶部开始

d. column-reverse 从下向上

意思是设置了属性值为 column-reverse后，盒子会从下向上排列，从最左最下面开始

2.flex-wrap：子项目多行

a.  nowrap 不换行

设置内容区样式： 
 .container{
            display: flex;
            flex-wrap: nowrap;
            width: 500px;
            height: 500px;
            border: 1px red solid;
        }
        .item{
            width: 100px;
            height: 100px;
            background-color: red;
            margin: 10px;
            border: 1px orange solid;
        }
 内容区： 
<div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
    </div>

如图所示：子元素盒子的宽度超过了父元素盒子的宽度，但是开启了弹性盒子后却没有自动换行而是每个子元素盒子都压缩了宽度，这就是弹性盒子的精妙所在

b.  wrap 自动换行

意思是设置属性属性为flex-wrap再设置属性值为wrap后，子元素盒子不会再压缩自身的宽度，而是会如果父元素盒子宽度不够了，子元素盒子就会自动换行

c. wrap-reverse 自动换行且排序颠倒

意思是设置属性属性为flex-wrap再设置属性值为wrap后，子元素盒子不会再压缩自身的宽度，而是会如果父元素盒子宽度不够了，子元素盒子就会自动换行，且排序颠倒，从父元素盒子的最右最下变开始

3. flex-flow 是flex-direction和flex-wrap的一起指定（简写）

例：.container{flex-flow:row wrap；}

这段代码作用和.container{flex-direction:row；  flex-wrap：wrap；}效果是一样的，是他的简写

flex布局xffE5html前端javascript

有关flex布局（弹性盒子一）的更多相关文章

  1. ruby - nanoc 和多种布局 - 2

    是否可以为特定(或所有)项目使用多个布局？例如，我有几个项目，我想对其应用两种不同的布局。一个是绿色的，一个是蓝色的(但是)。我想将它们编译到我的输出目录中的两个不同文件夹中(例如v1和v2)。我一直在玩弄规则和编译block，但我不知道这是怎么回事。因为，每个项目在编译过程中只编译一次，我不能告诉nanoc第一次用layout1编译，第二次用layout2编译。我试过这样的东西，但它导致输出文件损坏。compile'*'doifitem.binary?#don’tfilterbinaryitemselsefilter:erblayout'layout1'layout'layout2'

  2. ruby-on-rails - 我可以在没有 Controller 的情况下直接从 routes.rb 渲染布局吗？ - 2

    我想为网站的管理和公共(public)部分设置一对样式指南。每个都需要自己的布局，其中包含静态html和调用erbpartials的混合(因此静态页面不会削减它)。我不需要Controller来为这些页面提供服务，而且我不希望有效的仅开发内容使其余代码困惑。这让我想知道是否有一种方法可以直接呈现布局。免责声明:我明白这不是我应该经常/永远做的事情，而且我知道有很多争论可以解释为什么这是一个坏主意。我对这是否可能感兴趣。有没有办法让我直接从routes.rb渲染布局而不通过Controller？ 最佳答案 出于某种奇怪的原因，我想暂时

  3. ruby-on-rails - 设计 Controller 如何改变布局？ - 2

    这个问题在这里已经有了答案:differentlayoutforsign_inactionindevise(8个答案)关闭7年前。如何更改设计Controller中的布局？

  4. ruby-on-rails - Rails - 如何在布局中查找域 url - 2

    我有request.env['http_host']在本地主机上工作，但在heroku的布局页面中引用时会导致错误。此请求在View中工作并显示正确的基本url，但是当我将代码移动到布局时它会导致错误。注意-我正在使用它来为html电子邮件中的图像构建绝对url。收到错误:ActionView::Template::Error(undefinedmethod`env'fornil:NilClass): 最佳答案 如果你想要没有端口的主机，只需使用:request.host编辑:糟糕，我刚刚注意到您正在使用View中的代码。我不知道它

  5. Ruby GUI(非复杂布局) - 2

    我对RubyGUI设计做了很多研究，这似乎是Ruby倾向于落后的领域。我探索了MonkeyBars、wxRuby、fxRuby、Shoes等选项，只是想从Ruby社区获得一些意见。虽然它们绝对可用，但每一个的开发似乎都在下降。我在任何(减去fxRuby书)上都找不到大量有用的文档或用户基础。我只是想制作一个简单的GUI，所以我真的不想花费数百小时来学习更复杂的工具的复杂性或尝试使用甚至不再开发的东西(鞋子是应用程序的类型我正在寻找，但它有很多问题并且没有得到积极开发。)在所有选项中，你们会推荐哪个选项是最快的，并且仍然具有某种开发基础？谢谢! 最佳答案

  6. ruby - Prawn :有没有办法让一个盒子里的所有内容垂直对齐？ - 2

    我正在尝试将一些内容垂直居中放置在bounding_box中。对于单个文本，这没问题:bounding_box([0,bounds.top],:width=>pdf.bounds.right,:height=>pdf.bounds.top)dotext"verticallyalignedinthesurroundingbox",:valign=>:centerend但是如果我的边界框中有多个元素，我该怎么办:bounding_box([0,bounds.top],:width=>pdf.bounds.right,:height=>pdf.bounds.top)dotext"vertic

  7. ruby - Rails 渲染 Controller 中的部分和布局 - 2

    我正在覆盖设计注册Controller的创建操作。我有两种注册表格，个人或公司，公司有一个名为company_form的字段设置为true以区分这两种表格。在表单验证后，我希望呈现正确的表单(以前无论我使用什么表单，它都会返回默认表单)。我遇到了一个问题，即只渲染了部分(很明显，因为我只渲染了部分)，但我还需要渲染布局/应用程序文件。classRegistrationsControllerifresource.company_formrenderpartial:'shared/company_signup_form'elserenderpartial:'/shared/individu

  8. ruby-on-rails - 缺少带有 { :locale=>[:en], :formats=>[:html], 的模板布局/邮件程序 - 2

    我正在学习michaelharltrails教程，但出现此错误Missingtemplatelayouts/mailerwith{:locale=>[:en],:formats=>[:html],:variants=>[],:handlers=>[:raw,:erb,:html,:builder,:ruby,:coffee,:jbuilder]}.Searchedin:*"/home/ubuntu/workspace/app/views"预览账户激活时这是我的user_mailer.rbclassUserMailer错误突出显示了mailto:user.email,subject:"A

  9. ruby - Sinatra 中的嵌套布局 - 2

    tl;dr:在Sinatra中是否有一种干净的嵌套布局方式？对于我网站上的所有页面，我有一个通用的layout.erb，它呈现页眉、页脚和其他一些位。对于这些页面的一个子集，我想使用内部布局，除了那些公共(public)位之外，它还呈现左侧菜单。全局erb:pageTemplate执行layout.erb，其中yield执行pageTemplate在子集中erb:pageTemplate执行layout.erb，其中yield执行specificLayout.erb，其中yield执行pageTemplate。有道理吗？我对单独的类、before语句和任何其他ruby​​魔法持开放态度

  10. ruby-on-rails - 在 Rails 中是否可以动态加载类布局？ - 2

    我需要消息在项目中有不同的布局，是否可以在Rails中做这样的事情？ClassMessages::New谢谢 最佳答案 这对你有帮助classMessagesController 关于ruby-on-rails-在Rails中是否可以动态加载类布局？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/1274999/

随机推荐