• 有了这套flex页面布局方案,页面什么的,那都不是事。


    CSS3 弹性盒子

    弹性盒子是 CSS3 的一种新布局模式。
    (1)CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
    (2)引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

    浏览器支持

    浏览器支持图片

    css3 弹性盒子内容

    <!DOCTYPE html>
    <html>
      <head>
        <style>
          .flex-container {
            display: -webkit-flex;
            display: flex;
             400px;
            height: 250px;
            background-color: lightgrey;
          }
    
          .flex-item {
            background-color: cornflowerblue;
             100px;
            height: 100px;
            margin: 10px;
          }
        </style>
      </head>
      <body>
        <div class="flex-container">
          <div class="flex-item">flex item 1</div>
          <div class="flex-item">flex item 2</div>
          <div class="flex-item">flex item 3</div>
        </div>
      </body>
    </html>
    

    效果:
    效果

    CSS3 弹性盒子常用属性

    属性 描述
    flex-direction 指定弹性容器中子元素的排列方式
    flex-wrap 设置弹性盒子的子元素超出父容器时是否换行
    flex-flow flex-direction 和 flex-wrap 的简写
    align-items 设置弹性盒子元素在侧轴(纵轴)方向上的对齐方式
    align-content 修改 flex-wrap 属性的行为,类似于 align-items,但是不设置子元素对齐而是设置行对齐
    justify-content 设置弹性盒子在主轴上的对齐方式
    flex-direction 属性

    决定项目的方向。

    注意:如果元素不是弹性盒对象的元素,则 flex-direction 属性不起作用。

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

    效果图

    描述
    row 默认值。元素水平显示,正如一个行一样。
    row-reverse 与 row 相同,元素水平显示,正如一个行一样。
    cloumn 元素将垂直显示,正如一个列一样。
    cloumn-reverse 与 column 相同,但是以相反的顺序排列。
    flex-wrap 属性

    flex-wrap 属性规定 flex 容器是单行或者多行,同时横轴的方向决定了新行堆叠的方向

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

    (1) nowrap (默认):不换行。
    效果图
    (2)wrap:换行,第一行在上方。
    效果图
    (3)wrap-reverse:换行,第一行在下方。
    效果图

    描述
    nowrap 默认值。规定元素不拆行或不拆列。
    wrap 规定元素在必要的时候拆行或拆列。
    wrap-reverse 规定元素在必要的时候拆行或拆列。但是排列顺序相反
    flex-flow 属性

    flex-flow 属性是 flex-direction 属性和 flex-wrap 属性的简写形式,默认值为 row nowrap。

    .flex-container {
      flex-flow: stretch | center | flex-start | flex-end | baseline;
      flex-flow: <flex-direction> | <flex-wrap>;
    }
    
    align-items 属性
    .flex-container {
      align-items: stretch | center | flex-start | flex-end | baseline;
    }
    

    (1)flex-start 和 flex-end
    效果1
    (2)stretch 和 center
    效果2
    (3)baseline
    效果3

    描述
    stretch 默认值。项目被拉伸以适应容器。
    center 项目位于容器的中心。
    flex-start 项目位于容器的开头。
    flex-end 项目位于容器的结尾。
    baseline 项目位于容器的基线上。
    justify-content 属性

    justify-content 用于设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式

    .flex-container {
      align-items: flex-start | flex-end | center | space-between | space-around;
    }
    

    (1)flex-start
    效果1
    (2)flex-end
    效果2
    (3)center
    效果3
    (4)space-between
    效果4
    (5)space-around
    效果5

    弹性子元素属性

    常用属性值

    描述
    order 设置弹性盒子的子元素排列顺序。
    flex-grow 设置或检查弹性盒子子元素的扩展比率。
    flex-shrink 指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩,其收缩大小是依据 flex-shrink 的值。
    flex-basis 用于设置或检索弹性盒子伸缩基准值。
    flex 设置弹性盒子的子元素如何分配空间。
    align-self 在弹性盒子的子元素上使用。覆盖容器的 align-items 属性。
    order 属性

    设置弹性盒子的子元素排列顺序。

    .flex-container .flex-item {
      order: <integer>;
    }
    

    效果

    描述
    <integer> 用整数值来定义排列顺序,数值小的排在前面。可以为负值,默认为 0。
    flex-grow 属性

    设置或检查弹性盒子子元素的扩展比率,默认值为 0,即如果存在剩余空间,也不放大。

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

    效果

    描述
    <number> 如果所有项目的 flex-grow 属性都为 1,则它们将等分剩余空间(如果有的话)。如果一个项目的 flex-grow 属性为 2,其他项目为 1,则牵着占据的剩余空间将比其他项多一倍
    flex-shrink 属性

    flex-shrink 属性定义了项目的缩小比例,默认为 1,即如果空间不足,改项目将缩小。

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

    效果

    属性 描述
    <number> 如果所有项目的 flex-shrink 属性都为 1,当空间不足时,都将等比例缩小。如果一个项目的 flex-shrink 属性为 0,其他项目都为 1,则空间不足时,前者不缩小。负值对该属性无效。
    flex-basis 属性

    flex-basis 属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为 auto,即项目的本来大小。

    .item {
      flex-basis: <length> | auto; /*default auto*/
    }
    
    属性 描述
    <length> | auto 它可以设为跟 width 或 height 属性一样的值(比如 350px),则项目将占据固定空间。
    flex 属性

    flex 属性是 flex-grow,flex-shrink 和 flex-basis 的简写,默认值为 0 1 auto。后面两个属性可选

    .item {
      flex: none | [ < 'flex-grow' > < 'flex-shrink' >? || < 'flex-basis' > ];
    }
    
    属性 描述
    <number> 改属性有两个快捷值:auto(1 1 auto)和 none(0 0 auto).建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值
    align-self 属性

    align-self 属性允许单个项目有与其他项目不一样的对齐方式,可覆盖 align-items 属性。默认值为 auto,表示继承父元素的 align-items 属性,如果没有父元素,等同于 stretch。

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

    效果

    属性 描述
    auto | flex-start | flex-end | center | baseline | stretch 该属性可能取6个值,除了auto,其他都与align-items属性完全一致。
  • 相关阅读:
    LINQ大全。
    李开复回复:为什么很多人进不了Google
    判断输入的是否是数字?
    SQL Server 2005安装详解
    学习asp.net比较完整的流程
    .NET常用网站
    软件设计经典书籍推荐
    Linux 下zip包的压缩与解压
    centos的用户、组权限、添加删除用户等操作的详细操作命令
    CentOS5.5 默认基本服务详解
  • 原文地址:https://www.cnblogs.com/fanzhen/p/12810370.html
Copyright © 2020-2023  润新知