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

    一、不同的布局方式:

    web布局随着技术的不断发展,衍生了很多的布局方式常见的有:

    1、静态布局:根据浏览器默认的标签样式来显示,通过设置width,height;超过设定值的出现滚动条;移动端无法兼容pc端页面,需要单独对移动端页面进行设计;常见是通过UA信息 JS 判断跳转至二级域名或二级目录;

    2、流式布局:使用百分比而非固定的像素进行布局,可以在屏幕尺寸跨度较小的情况下使用;

    3、自适应布局:使用 @media 媒体查询给不同尺寸和介质的设备切换不同的样式;

    4、flex弹性布局:面对传统的布局方案的死板,flex布局可以简便、完整、响应式地实现各种页面布局;目前,它已经得到了所有浏览器的支持

    5、响应式布局:响应式设计是确保一个页面在所有终端上(各种尺寸的PC、手机)能显示出令人满意的效果;通常是结合了流式布局,flex弹性布局,和搭配媒体查询技术的使用;

    二、flex布局的标准:

    其中,flex布局又经历了W3C 草案不同时期拥有不同的标准,新手表示很很困惑;查阅到资料:

    W3C 2009年第1次草案:[display:box;]()
    - W3C 2011年第2次草案:[display:flexbox | inline-flexbox;]()
    - W3C 2012年第5次草案及以后的候选推荐标准:[display:flex | inline-flex;]
    推荐的标准是:
    display:flex;    display:inline-flex;

    三:flex布局:

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

    项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size  。
     
    1、容器的属性:
    flex-direction://定义主轴方向
    
    row(默认值)://主轴为水平方向,起点在左端。
    row-reverse://主轴为水平方向,起点在右端。
    column://主轴为垂直方向,起点在上沿。
    column-reverse://主轴为垂直方向,起点在下沿。
    flex-wrap://定义换行
    nowrap(默认)://不换行
    wrap://换行,第一行在上方
    wrap-reverse://换行,第一行在下方
    flex-flow
    
    //flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap
    justify-content://定义了项目在主轴上的对齐方式;
    flex-start(默认值)://左对齐
    flex-end://右对齐
    center:// 居中
    space-between://两端对齐,项目之间的间隔都相等。
    space-around://每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
    align-items//定义项目在交叉轴上如何对齐
    flex-start://交叉轴的起点对齐。
    flex-end://交叉轴的终点对齐。
    center://交叉轴的中点对齐。
    baseline: //项目的第一行文字的基线对齐。
    stretch(默认值)://如果项目未设置高度或设为auto,将占满整个容器的高度。
    align-content  //定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用
    
    flex-start://与交叉轴的起点对齐。
    flex-end://与交叉轴的终点对齐。
    center://与交叉轴的中点对齐。
    space-between://与交叉轴两端对齐,轴线之间的间隔平均分布。
    space-around://每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
    stretch(默认值)://轴线占满整个交叉轴。

    2、项目的属性:

    order属性 //定义项目的排列顺序。数值越小,排列越靠前,默认为0
    flex-grow //属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。
    flex-shrink //属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小
    flex-basis //属性定义了在分配多余空间之前,项目占据的主轴空间(main size);
    flex属性 //flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选;
    align-self //属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch

    四、一个flex布局 demo

    将上述的所有属性都做成了一个demo,方便理解;flex布局

     

     参考链接:

    Flex 布局教程:语法篇;

    静态布局、自适应布局、流式布局、响应式布局、弹性布局等的概念和区别

    CSS3 display:flex和display:box有什么区别?

  • 相关阅读:
    解决PKIX:unable to find valid certification path to requested target 的问题
    Linux 上的常用文件传输方式介绍与比较
    用VNC远程图形化连接Linux桌面的配置方法
    红帽中出现”This system is not registered with RHN”的解决方案
    linux安装时出现your cpu does not support long mode的解决方法
    CentOS SSH配置
    es6扩展运算符及rest运算符总结
    es6解构赋值总结
    tortoisegit安装、clon、推送
    es6环境搭建
  • 原文地址:https://www.cnblogs.com/engeng/p/8708580.html
Copyright © 2011-2022 走看看