Flex 布局

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具与关键技术： CSS

作者：公孙离

撰写时间：2021/6/8

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

       布局的传统解决方案，基于盒状模型，依赖 display 属性 +position属性+float属性。

它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C 提出了

一种新的方案----Flex 布局，可以简便、完整、响应式的实现各种页面布局。目前。它已

经得到了所有浏览器的支持，这意味着，现在就能黑安全的使用这项功能。

一、Flex布局是什么？

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

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

       .box{

              display: flex;

           }

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

       .box{

              display: inline-flex;

           }

Webkit 内核的浏览器，必须加上-webkit 前缀：

       .box{

              display: -webkit-flex; /*Safan*/

              display: flex;

           }

            浮动：float       清除浮动：clear         垂直对齐：vertical-align

*设置了 Flex 布局之后，子元素的 float、clear 和 vertical-align 失效；

二、基本概念

       采用 Flex 布局的元素，称为 Flex 容器 （flex container），简称“容器”。它的所有子元素

自动成为容器成员，称为 Flex 项目 (flex item)，简称“项目”。

       容器默认存在两根轴：水平主轴（main axis）和 垂直的交叉轴。主轴的开始位置（与边框的交叉点）

叫做 main start，结束位置叫做 main end；交叉轴的开始位置叫 cross start，结束位置叫 cross end。

      

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

三、容器的属性：

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

       flex-diretion：主轴的方向 （即项目的排列方向）；

       flex-wrap：如果项目在一条轴线排不下，如何换行；

       flex-flow：flex-diretion 和 flex-wrap 的简写；

       justify-content：项目在主轴上的对齐方式；

       align-itens：项目在交叉轴上的对齐；

       align-content：多根轴线的对齐方式。

flex-diretion 属性：

       Flex-ditrtion 属性决定主轴的方向（即项目的排列方向）。

       该属性可能取值以及对应的效果如下：

       flex-diretion: row;( 默认，主轴为水平方向，起点在左端。)

起点左端：   1    2    3

       flex-diretion: row-reverse;( 主轴为水平方向，起点在右端。)

起点右端：   3    2    1

       flex-direction: column； ( 主轴为垂直方向，起点在上沿；)

起点上沿：         1

                           2

                           3

       flex-direction: colum-reverse; ( 主轴为垂直方向，起点在下沿；)

起点下沿：         3

                           2

                           1

flex-wrap 属性：

       默认情况下，项目都排在一条线 （又称“轴线”）上。flex-wrap 属性定义，如果一条轴线排不下，

如何换行。

       该属性可能取值以及对应的效果如下：

       flex-wrap: nowrap; ( 默认，不换行 )

        1  2  3  4  5  6  7  8  9  10  11  12  

       flex-wrap: warp; （ 换行，第一行在上方 ）     

        1  2  3  4  5  6  7  8  9  

       10  11  12

        flex-wrap: wrap-reverse; （ 换行，第一行在下方 ）

       10  11  12

        1  2  3  4  5  6  7  8  9  

flex-flows 属性：

        flex-flow 是 flex-direction 和 flex-wrap 属性的简写，默认值是 row nowrap。

justify-content 属性：

        Justify-content 属性定义了项目在主轴上的对齐方式。

该属性可能取值以及对应的效果如下：