zoukankan      html  css  js  c++  java
  • 弹性布局(flex)

    一、Flex 布局是什么?

    Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。

    任何一个容器都可以指定为 Flex 布局。但在使用时,需要注意以下两点:

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

    2、设为Flex布局以后,子元素的float,clear和vertical-align属性将失效

     

    二、基本概念

      采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称"项目"。

      容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end

      项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size

    三、属性

    弹性盒布局是CSS 3新增的功能,它具有如下几个配套属性:

    • flex-flow:该属性作用于弹性盒容器,用于控制容器内子元素的排列方式和换行方式。该属性是一个复合属性,由flex-direction和flex-wrap。
    • flex-direction:指定弹性盒容器内子元素的排列方向。该属性支持如下属性值:
      • row:横向从左到右排列
      • row-reverse:横向从右到左排列
      • column:纵向从上到下排列
      • column-reverse:纵向从下到上排列
    • flex-wrap:指定弹性盒容器内子元素的换行方式。该属性支持如下属性值:
      • nowrap:不换行,是默认值。
      • wrap:换行。
      • wrap-reverse:反向换行。
    • order:该属性作用于弹性盒容器内的子元素,指定子元素的排列顺序
    • flex:该属性作用于弹性盒容器内的子元素,用于控制子元素的缩放比例。该属性是一个复合属性,由flex-grow、flex-shrink、flex-basis三个子属性组成。该属性支持如下属性值:
      • flex:是一个复合属性。其完整属性为flex-grow  flex-shrink  flex-basis;但该属性值也支持简写成一个整数值,比如flex:2;这相当于指定flex:2 2 0px。
      • flex-grow:该属性指定flex容器内各子元素的拉伸因子。默认值为0,表示该子元素不会被拉伸。
      • flex-shrink:该属性指定flex容器内各子元素的收缩因子。默认值为0,表示该子元素不会被缩小。
      • flex-basis:该属性指定flex容器内各子元素缩放之前的基准大小。支持长度值和百分比,默认值为0。
    • align-items:该属性作用于弹性盒容器,用于控制弹性盒容器内所有子元素在垂直方向上的对其方式。
    • align-self:该属性作用于弹性盒容器内的子元素,用于控制该子元素自身在垂直方向上的对齐方式。

    align-items和align-self两个属性都允许设置以下属性值:

      •  flex-start:顶部(或左边)对齐
      • flex-end:底部(或右边)对齐
      • center:居中对齐
      • baseline:顶部(或左边)对齐,但以元素的底部作为对齐基准线。
      • stretch:拉伸子元素,让它们占满父容器。

    除此之外,由于align-self是作用于flex容器中的子元素,用于控制该子元素本身的对其方式,所以align-self还可以额外指定auto属性值,用于说明该子元素采用父容器的对齐方式。

    • justify-content:该属性作用于弹性盒容器内的子元素,用于控制该子元素自身在排列方式上的对其方式。该属性支持如下属性值:
      • flex-start:所有子元素都靠近排列方向的起始端,留出结束端多余的空间。
      • flex-end:所有子元素都靠近排列方向的结束端,留出起始端多余的空间。
      • center:所有子元素都靠近排列方向的中间,留出起始端、结束端多余的空间。
      • space-between:多余的空间平均分布到各子元素的中间。
      • space-around:多余的空间平均分布到各子元素的中间和两边。

    该属性设置不同值时的效果如下(简单画了一下,存在细微差异请谅解)

    • align-content:该属性作用于弹性盒容器,用于控制弹性盒容器内行的分布方式。该属性支持如下属性值:
      • flex-start:所有行都靠近顶部或左端。
      • flex-end:所有行都靠近底部或右端。
      • center:所有行居中显示。
      • space-between:多余的空间平均分布到各行之间。
      • space-around:多余的空间平均分布到各行之间和两边。

    下面页面代码示范了align-content属性的功能:

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title> align-content </title>
        <style type="text/css">
            div#container {
                border: 1px solid black;
                padding: 5px;
                width: 350px;
                height: 160px;
                display: flex;
                flex-wrap:wrap;
            }
            div>div {
                border: 1px solid #aaf;
                padding:5px;
                width:100px;
            }
        </style>
    </head>
    <body>
    <div id="container">
        <div>栏目一</div>
        <div>栏目二</div>
        <div>栏目三</div>
        <div>栏目四</div>
        <div>栏目五</div>
        <div>栏目六</div>
        <div>栏目七</div>
        <div>栏目八</div>
        <div>栏目九</div>
    </div>
    <button onclick="change(this.innerHTML);">flex-start</button>
    <button onclick="change(this.innerHTML);">flex-end</button>
    <button onclick="change(this.innerHTML);">center</button>
    <button onclick="change(this.innerHTML);">space-between</button>
    <button onclick="change(this.innerHTML);">space-around</button>
    <script type="text/javascript">
    function change(val){
        document.getElementById('container').style.alignContent = val;
    }
    </script>

    下面是为单击按钮改变id为container的容器align-content属性后的效果,图中用红线标记的为该效果对应的属性值。

  • 相关阅读:
    Git 基础
    SharePoint 2013 对象模型操作"网站设置"菜单
    SharePoint 2013 隐藏部分Ribbon菜单
    SharePoint 2013 Designer系列之数据视图筛选
    SharePoint 2013 Designer系列之数据视图
    SharePoint 2013 Designer系列之自定义列表表单
    SharePoint 2013 设置自定义布局页
    SharePoint 2013 "通知我"功能简介
    SharePoint 2013 创建web应用程序报错"This page can’t be displayed"
    SharePoint 禁用本地回环的两个方法
  • 原文地址:https://www.cnblogs.com/web12/p/9971359.html
Copyright © 2011-2022 走看看