zoukankan      html  css  js  c++  java
  • Flex布局(转自阮一峰老师)

    转载自:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

    Flex布局语法

    任何一个容器都可以指定为 Flex 布局。

    .box{
      display: flex;
    }
    

      

    行内元素也可以使用 Flex 布局。

    .box{
      display: inline-flex;
    }
    

      

    Webkit 内核的浏览器,必须加上-webkit前缀。

    .box{
      display: inline-flex;
    }
    

      

    注意,设为 Flex 布局以后,子元素的floatclearvertical-align属性将失效

    以下6个属性设置在容器上

    flex-direction(水平排列还是竖直)

    .box {
      flex-direction: row | row-reverse | column | column-reverse;
    }
    

    flex-wrap(换行方式)

    .box{
      flex-wrap: nowrap | wrap | wrap-reverse;
    }
    

    flex-flow(以上两个属性的简写)

    .box {
      flex-flow: <flex-direction> || <flex-wrap>;
    }
    

      

    justify-content(水平对齐方式)

    .box {
      justify-content: flex-start | flex-end | center | space-between | space-around;
    }
    

      

    align-items(竖直对齐方式)

    .box {
      align-items: flex-start | flex-end | center | baseline | stretch;
    }
    

    align-content(多根轴线的对齐方式)

    .box {
      align-content: flex-start | flex-end | center | space-between | space-around | stretch;
    }
    

    以下6个属性设置在项目上

    order(项目排列顺序,数值越小越前)

    .item {
      order: <integer>;
    }
    

    flex-grow(屏幕有剩余空间时的放大比例)

    .item {
      flex-grow: <number>; /* default 0 */
    }
    

    flex-shrink(屏幕压缩时的缩小比例)

    .item {
      flex-shrink: <number>; /* default 1 */
    }
    

    flex-basis(无缩放时原始尺寸)

    .item {
      flex-basis: <length> | auto; /* default auto */
    }
    

    flex(该属性是以上三个属性的简写)

    .item {
      flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
    }
    

    该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto)

    align-self(设置项目自身的对齐方式,覆盖容器定义的对齐方式)

    .item {
      align-self: auto | flex-start | flex-end | center | baseline | stretch;
    }
    

     

    Flex 布局实例 (此部分见下面链接原文,如果以上都理解,以下都能实现)

    转载自:http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

    一、骰子的布局

    二、网格布局

    三、圣杯布局

     

    <body class="HolyGrail">
      <header>...</header>                              // header
      <div class="HolyGrail-body">                          //body 分为 左,中,右
        <main class="HolyGrail-content">...</main>
        <nav class="HolyGrail-nav">...</nav>
        <aside class="HolyGrail-ads">...</aside>
      </div>
      <footer>...</footer>
    </body>
    .HolyGrail {
      display: flex;
      min-height: 100vh;
      flex-direction: column;
    }
    
    header,
    footer {
      flex: 1;
    }
    
    .HolyGrail-body {
      display: flex;
      flex: 1;
    }
    
    .HolyGrail-content {                      //中间自动缩放
      flex: 1;
    }
    
    .HolyGrail-nav, .HolyGrail-ads {               //两边固定比例
      /* 两个边栏的宽度设为12em */
      flex: 0 0 12em;
    }
    
    .HolyGrail-nav {
      /* 导航放到最左边 */
      order: -1;                          //因为默认flex-direction: row
    }

    如果是小屏幕,躯干的三栏自动变为垂直叠加。

    @media (max- 768px) {
      .HolyGrail-body {
        flex-direction: column;
        flex: 1;
      }
      .HolyGrail-nav,
      .HolyGrail-ads,
      .HolyGrail-content {
        flex: auto;
      }
    }

     

    四、输入框的布局

    我们常常需要在输入框的前方添加提示,后方添加按钮。

    <div class="InputAddOn">
      <span class="InputAddOn-item">...</span>
      <input class="InputAddOn-field">
      <button class="InputAddOn-item">...</button>
    </div>
    .InputAddOn {
      display: flex;
    }
    
    .InputAddOn-field {
      flex: 1;
    }

     

    五、悬挂式布局

    有时,主栏的左侧或右侧,需要添加一个图片栏。

    <div class="Media">
      <img class="Media-figure" src="" alt="">
      <p class="Media-body">...</p>
    </div>
    .Media {
      display: flex;
      align-items: flex-start;
    }
    
    .Media-figure {
      margin-right: 1em;
    }
    
    .Media-body {
      flex: 1;
    }

     

    六、固定的底栏

     有时,页面内容太少,无法占满一屏的高度,底栏就会抬高到页面的中间。这时可以采用Flex布局,让底栏总是出现在页面的底部。

     

    <body class="Site">
      <header>...</header>
      <main class="Site-content">...</main>
      <footer>...</footer>
    </body>
    .Site {
      display: flex;
      min-height: 100vh;
      flex-direction: column;
    }
    
    .Site-content {
      flex: 1;
    }

     

    七、流式布局

     每行的项目数固定,会自动分行。

    .parent {
      width: 200px;
      height: 150px;
      background-color: black;
      display: flex;
      flex-flow: row wrap;
      align-content: flex-start;
    }
    
    .child {
      box-sizing: border-box;                 //应用IE盒模型,将border和padding纳入width计算范围。
      background-color: white;
      flex: 0 0 25%;                     //这样25%包括下面设置的1px边框,一行刚好四个元素 
      height: 50px;
      border: 1px solid red;
    }

     完毕

     

     

     

  • 相关阅读:
    java基础部分的一些有意思的东西。
    antdvue按需加载插件babelpluginimport报错
    阿超的烦恼 javaScript篇
    .NET E F(Entity Framework)框架 DataBase First 和 Code First 简单用法。
    JQuery获得input ID相同但是type不同的方法
    gridview的删除,修改,数据绑定处理
    jgGrid数据格式
    Cannot read configuration file due to insufficient permissions
    Invoke action which type of result is JsonResult on controller from view using Ajax or geJSon
    Entity model数据库连接
  • 原文地址:https://www.cnblogs.com/FunkyEric/p/8933201.html
Copyright © 2011-2022 走看看