flex布局,flex布局实例,flex布局教程

学习flex布局前请一定按照阮一峰老师的教程手工敲一遍,100%理解,光看是一知半解。

【一】.基础知识

flex布局,只要把元素设置为display:flex,此元素即可称为flex容器,元素的所有子元素都自动成为容器的成员,简称flex-item

flex容器本身有两根轴,水平的主轴,垂直的交叉轴。因此延伸出4个位置,main start , main end , cross start , cross end

flex容器成员,单个成员占据的主轴空间叫main size,单个成员占据的交叉轴空间叫cross size

【二】.容器的属性

(2.1).flex-direction(设置主轴的方向,设置了方向会影响容器中成员的排列方向)

    (2.1.1).flex-direction:row,默认值,主轴的方向为水平方向,容器的成员从左到右排列

<style>
    .caochang{
        display: flex;
    }
</style>
<div class="caochang">
    <div class="xuesheng">学生A</div>
    <div class="xuesheng">学生B</div>
    <div class="xuesheng">学生C</div>
</div>

     显示ABC,A从页面最左边开始显示

    (2.1.2).flex-direction:row-reverse,主轴的方向为水平方向,容器的成员从右到左排列

<style>
        .caochang{
            display: flex;
        }
</style>

     显示CBA,A从页面最右边开始显示

    (2.1.3).flex-direction:column,主轴的方向为垂直方向,容器成员从上到下排列

    显示:

   学生A
   学生B
   学生C

    (2.1.4).flex-direction:column-reverse,主轴的方向为垂直方向,容器成员从下到上排列

    显示:

   学生C
   学生B
   学生A

flex-direction的所有值总结下就是改变了容器成员的显示方向和顺序

(2.2).flex-wrap属性(容器成员一般都是排在一条线上,这个属性主要来设置如果一行排列不下,如何来换行)

    (2.2.1).flex-wrap:nowrap,默认值,不换行

     超出会显示横向滚动条,很奇怪的是我这里超出页面宽度,文字是纵向显示的,类似:

  学学
  生生
  A B

    (2.2.2).flex-wrap:wrap,正常换行显示

    (2.2.3).flex-wrap:wrap-reverse,换行显示,只不过显示顺序不一样,假如每个容器元素宽度100%,元素分别为ABC,那么它显示CBA

(2.3).flex-flow属性是flex-direction和flex-wrap的混合写法,默认值 row nowrap,可以同时设置容器内元素的排列方向和换行方式

      例子flex-flow:row-reverse wrap;

(2.4).justify-content属性设置容器内元素在主轴上的对齐方式(默认值flex-start)

    (2.4.1).flex-start 容器元素以主轴的开头对齐,假设主轴方向为从左到右,相当于左对齐

    (2.4.2).flex-end   容器元素以主轴的结尾对齐,假设主轴方向为从左到右,相当于右对齐

    (2.4.3).center     居中对齐(容器的所有元素显示在容器中部)

    (2.4.4).space-between 两端对齐,容器内元素之间间隔相等,是元素之间的间隔相等

    (2.4.4).space-around 每个容器内元素两侧的间隔都相等

(2.5).align-item属性设置项目在交叉轴的对齐方式

    (2.5.1).flex-start 交叉轴的起点对齐

    (2.5.2).flex-end   交叉轴的终点对齐

    (2.5.3).center 交叉轴的中点对齐,相当于垂直居中了,所以容器的元素都在中间

    (2.5.4).baseline 以容器元素的第一行文字的基线对齐

    (2.5.5).stretch 默认值,如果容器的元素没有设置高度或者auto,将占满整个容器的高度

(2.6).align-content属性定义多根轴线的对齐方式。如果只有1根轴线则不起作用。

    (2.6.1).flex-start 交叉轴的起点对齐

    (2.6.2).flex-end   交叉轴的终点对齐

    (2.6.3).center 交叉轴的中点对齐

    (2.6.4).space-between 交叉轴两端对齐

    (2.6.5).space-around  每根轴线两侧的间隔都相等

    (2.6.6).stretch 轴线占满整个交叉轴。

【三】.项目的属性

(3.1).order属性定义项目的排列顺序,值越小,排列越靠前,举个栗子:

<div  style="order: 3">A</div>
<div  style="order: 2">B</div>
<div  style="order: 1">C</div>

代码虽然是ABC,页面显示的顺序是CBA

(3.2).flex-grow属性定义项目的放大比例,默认值为0,将容器的元素或者项目在原来基础放大N倍

假如所有容器元素项目的flex-grow的值大于0且都相等,则元素项目等分整个容器的空间

例如

<div style="flex-grow: 1;background: red;">A</div>
<div style="flex-grow: 1;background: green;">B</div>
<div style="flex-grow: 1;background: black;">C</div>

假如容器的元素分别设置为1,2,3的比例,则第2个元素是第1个元素的2倍,第3个元素是第1个元素的3倍

例如

<div style="flex-grow: 1;background: red;">A</div>
<div style="flex-grow: 2;background: green;">B</div>
<div style="flex-grow: 3;background: black;">C</div>

(3.3).flex-shrink属性设置容器内元素的缩小比例,默认值是1,也就是当容器空间不足,项目会缩小

假如都设置为1,当容器空间不足,全部容器的元素项都等比例缩小

假如某个元素项设置为0,则意思当整个容器空间不足时它不缩小。

(3.4).flex-basis设置项目占据整个容器的主轴空间大小,默认值为auto,支持长度单位和百分比

类似于自己设置width

(3.5).flex属性是flex-grow、flex-shrink、flex-basis的简写,默认值0 1 auto

(3.6).align-self属性允许单个项目有与其他项目不同的对齐方式,可以覆盖align-items属性,默认值auto

访客
邮箱
网址

Top