【归纳】flex布局

作者: 付坤奇 | 来源:发表于2018-10-26 15:14 被阅读17次
    今天我大概地学习和了解了flex相关的知识。这次的学习是我第一次系统地接触flex,之前只是听说过,但是并不知道flex到底是什么一回事。所以在这次学习后,我认为把我这次的学习内容在博客上再进行一次归纳,是相当必要的。 timg.jpg

    说到flex布局,在我之前的影响中,只知道这是一种较传统布局较方便的布局,这种布局对我来说是全新的。在flex布局出现之前,我们使用的传统布局主要有以下几种:

    1. normal flow 文档流、正常流
    2. float + clear 清除浮动
    3. position relative + absolute 相对 + 绝对定位
    4. display inline-block 横向布局
    5. 负 margin 扩大宽度、产生位移

    这些传统的布局方式虽然可以满足我们的很多需求,但是也并不方便,比如实现垂直居中。而现在我们就要开始接触flex布局这种新的布局方式了。flex也可称为“弹性布局”,flex布局有以下几个特点:

    1. 块级布局侧重垂直方向,行内布局侧重水平方向。flex布局与方向无关
    2. flex布局可以实现空间自动分配,自动对齐
    3. flex布局适用于简单的线性布局,复杂的布局则可以使用grid布局

    接下来就将对flex布局的几个重要知识点进行归纳。

    flex布局的基本概念

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


    png1.png

    如上图所示,该flex容器在纵横有两根轴,其中横向的称为主轴(main axis),纵向的称为侧轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。子元素默认是沿主轴排列的。子元素在主轴方向的宽度叫做main size,在侧轴方向的高度叫做cross size。

    flex container 的属性

    flex container(flex容器)有如下六个属性:

    • flex-direction
    • flex-wrap
    • flex-flow
    • justify-content
    • align-items
    • align-content

    flex-direction 方向

    该属性主要有以下值:

    • row:将所有子元素排列在一行,不会换行(默认值)
    • row-reverse:将所有子元素从右至左排列在一行
    • column:将所有子元素从上往下排列
    • column-reverse:将所有子元素从下往上排列

    flex-wrap 换行

    该属性主要有以下值:

    • wrap:换行
    • nowrap:不换行(默认值)
    • wrap-reverse:换行,但是第一行在下方,即反转 wrap 排列。

    flex-flow 上面两个属性的缩写

    默认值为row nowrap,可以以如下方法设定该属性:

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

    justify-content 主轴方向的对齐方式

    该属性主要有以下值:

    • space-between:将各子元素排列在一行,并将行内的空间均分在元素之间
    • space-around: 将各子元素排列在一行,并将行内的空间分配在元素两侧
    • flex-start:子元素由主轴起点开始排列(默认值)
    • flex-end:子元素由主轴终点开始排列
    • center:在主轴方向居中

    align-items 侧轴方向的对齐方式

    该属性主要有以下值:

    • stretch:将所有子元素伸展至最大高度,如果子元素未设置高度或设为auto,将占满整个容器的高度。(默认值)
    • flex-start:子元素由侧轴起点开始排列
    • flex-end:子元素由侧轴终点开始排列
    • center:在侧轴方向居中
    • baseline: 子元素的第一行文字的基线对齐。效果如下图所示:
    png2.png

    align-content 多行多列的对齐方式

    该属性主要有以下值:

    • space-between:将侧轴方向的空间均分在行距中
    • space-around:将侧轴方向的空间分配在每行上下两侧
    • flex-start:以侧轴起点对齐
    • flex-end:以侧轴终点对齐
    • stretch:子元素平均分配侧轴方向的空间,伸展排列(默认值)

    flex item 的属性

    flex item(子元素)有如下六个属性:

    • order
    • flex-grow
    • flex-shrink
    • flex-basis
    • flex
    • align-self

    flex-grow 空间足够时的扩张比例

    该属性默认值为0。
    如果所有子元素的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。如果一个子元素的flex-grow属性为2,其他子元素都为1,则前者占据的剩余空间将比其他项多一倍。

    flex-shink 空间不足时的收缩比例

    该属性默认值为1。
    如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。

    flex-basis 子元素的默认宽度

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

    flex 上面三条属性的缩写

    默认值为0 1 auto。可以以如下方式设定该属性:

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

    order 子元素排序权重

    数值越小,排列越靠前,默认为0。

    align-self 自身的排序方式

    即不使用父元素决定的对齐方式,自身设定一个对齐方式。可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。

    使用flex布局的几个技巧

    flex 布局可以简便、完整、响应式地实现各种页面布局。下面就简要地记录几个flex布局的技巧

    1. 实现手机布局

    如果内容被修剪,需要浏览器显示滚动条,以便查看剩余内容,可以使用 over-flow:auto;
    实现手机上中下布局:

    .content{height:100vh;display:flex;flex-direction:column;}
    
    1. 实现电脑左中右布局
    .content>aside{width:120px;}
    .content>main{height:400px;flex:1}
    .content>nav{width:100px;}
    
    1. 完美居中
    .parent{
        display:flex;
        justify-content:center;
        align-items:center;
    }
    

    以上就是我此次关于flex学习的一些记录。可以看出,这次学习是围绕着阮一峰的一篇关于flex的博客展开的,他的博客对我此次学习flex布局以及此次的flex博客编写起到了一定的帮助。除此之外,我在这里推荐两个关于flex学习的小游戏,寓教于乐,十分有趣。

    1. Flex 布局教程:语法篇-阮一峰的网络日志
    2. 青蛙小游戏
    3. 塔防小游戏

    博客原地址:http://franko.top/1809/20180925A/

    相关文章

      网友评论

        本文标题:【归纳】flex布局

        本文链接:https://www.haomeiwen.com/subject/vvzktqtx.html