草庐IT

flex布局之flex-direction

颜正义 2023-04-14 原文

一、flex布局的原理

    1,flex是”flexible Box”的缩写，意为”弹性布局”；

    2.当我们为父盒子设为flex布局以后，子元素的float、clear和vertical-align属性将会失效。

言而简之：flex布局原理就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。

二、flex布局父项常见属性

  1. flex-direction:设置主轴的方向
  2. justify-content:设置主轴上的子元素排列方式
  3. flex-wrap:设置子元素是否换行
  4. align-content:设置侧轴上的子元素的排列方式(多行)
  5. align-items:设置侧轴上的子元素的排列方式(单行)
  6. flex-flow:复合属性，相当于同时设置了flex-direction和flex-wrap

三、主轴和侧轴

    1.在flex布局中，是分为主轴和侧轴两个方向的

    默认主轴就是x轴方向，水平向右

    默认侧轴方向就是y轴方向，垂直向下

    2.属性值

    flex-direction属性决定主轴的方向(即项目的排列方向)

当然，主轴和侧轴是会变化的，就看flex-direction设置谁为主轴，剩下的就是侧轴了。但是子元素是跟着主轴来进行排列的

属性

说明

row

默认值从左到右

row-reverse

从右到左

column

从上到下

column-reverse

从下到上

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>初体验</title>

    <style>

        div {

            /*给父级添加flex，里面的行内元素就转换成了块级元素 */

            display: flex;

            width: 300px;

            height: 150px;

            background-color: skyblue;

            margin: 0 auto;

            /* 默认是沿着x轴排列的 */

            /* flex-direction: row; */

            /* 翻转，倒着排列 */

            /* flex-direction: row-reverse; */

            /* 设置y轴为主轴,x轴就成了侧轴 */

            /* flex-direction: column; */

            /* 沿y轴翻转 */

            flex-direction: column-reverse;

        }

       

        div span {

            width: 90px;

            height: 45px;

            background-color: plum;

            margin: 5px;

            /* flex: 1; */

        }

    </style>

</head>

<body>

    <div>

        <span>1</span>

        <span>2</span>

        <span>3</span>

    </div>

</body>

</html>

flex-direction:row;

flex-direction:row-reverse;

flex-direction:column;

flex-direction:column-reverse;

flexflex-directionstyletext-alignaligncsscss3htmljavascript前端

有关flex布局之flex-direction的更多相关文章

  1. ruby-on-rails - s3_direct_upload 在生产服务器中不工作 - 2

    在Rails4.0.2中，我使用s3_direct_upload和aws-sdkgems直接为s3存储桶上传文件。在开发环境中它工作正常，但在生产环境中它会抛出如下错误，ActionView::Template::Error(noimplicitconversionofnilintoString)在View中，create_cv_url,:id=>"s3_uploader",:key=>"cv_uploads/{unique_id}/${filename}",:key_starts_with=>"cv_uploads/",:callback_param=>"cv[direct_uplo

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

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

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

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

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

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

  5. 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中的代码。我不知道它

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

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

  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/

随机推荐