• 前端三剑客之CSS--flexable layout box 经典解读


    前端三剑客之CSS--css3 flexbox layout(弹性布局)--完全解析                                                               

    一、背景--                                                                                                                                            
    ​ Flextbox Layout(弹性盒布局或伸缩盒布局),提供了一种更加有效的方式去布局、对齐和给                
    容器中的子元素分配空间,即使他们的尺寸未知或者是动态改变的。 看看里面有个flex就能想象出来。

                                                                                                                                                                 
    ​ Flexbox layout背后的设计理念:赋予容器去改变他的子元素的宽、高、排列顺序的能力,从而可以    
    更好的填充可用空间,尤其对各种各样的设备和屏幕尺寸提供了便利的方式去布局。一个具有flex特     
    性的容器可以去拉伸他的子元素去填充可用的自由空间,也可以收缩他的子元素防止溢出。                  

    ​ 更重要  
    的一点,flextbox layout 的布局方向也是不固定的。这点与我们以前的布局是不同的。比如:block
    是垂直布局的,而inline是水平布局的。 对那些可以工作良好的页面来说,他们在支持庞大或者复杂
    的应用方面缺乏灵活性。尤其当面对设备的方向、尺寸、缩放等等方面发生改变的时候,这种缺点更
    加明显。
    二、基本知识
    flexbox是一个完整的模块,而不是一个单一的属性。
    flexbox加入了大量的属性。这些属性一部分用在容器上(父元素,一般称之为 flex container),而另外
    的一些是用在子元素上(一般称之为 flex items. 弹性项目)。
    一般情况下,flex itmes 要么沿着 main axis 布局(从主轴起点到主轴重点),要么沿着 cross axis 布局
    (从侧轴起点到侧轴重点)。

    主轴(main axis) : 弹性容器的主轴是最主要的轴,flex items会沿着这条轴
    被布局。有一点需要注意:主轴不一定总是水平的,他的方向由 flex-direction 属性的值来决定。
    (后面后细讲)
    主轴起点(main start)和主轴终点(main end):弹性容器中的 flex items 会从 主轴起点
    开始 到主轴重点结束 布局。
    主轴长度(main size):flex item的宽或高就是主轴长度。到底是宽还是
    高,由谁沿着主轴的方向来决定。
    侧轴(cross axis):垂直于主轴的轴就是侧轴。侧轴的方向由主轴来
    决定。
    侧轴起点(cross start )和侧轴终点(cross end):弹性行(flex lines)从侧轴起点开始到侧轴重点
    结束。
    侧轴长度(cross size):伸缩项目的在侧轴方向的宽度或高度就是项目的侧轴长度,伸缩项目的
    侧轴长度属性是「width」或「height」属性,由哪一个沿着着侧轴方向决定。
    ***************************************************************************************************************************

    ***************************************************************************************************************************

  • 相关阅读:
    车载以太网 doip someip
    pytest
    lauterbach
    django
    django info
    Linux上加了kdb,softlock
    jenkins war
    Ubuntu 编译安装 Python3.6.8 没有正确编译 sqlite3 的问题
    HTB靶场记录之Bank
    HTB靶场记录之SolidState
  • 原文地址:https://www.cnblogs.com/xiaoyangaibianchen/p/9896229.html
Copyright © 2020-2023  润新知