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

            上篇文章整理了关于盒模型的相关内容,今天了解下flex弹性布局,主要说明弹性布局的思想以及我对弹性布局对理解,具体详细内容可参考阮一峰大神的文章,写的非常之详细 --- http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

          相对于盒模型来说:

    • 优点:灵活、易用、响应式
    • 缺点:兼容性差---ie10以上支持

     理解:

    • 通过display: flex; 设置flex容器。

    • 每个容器默认存在两个轴,横向为主轴,纵向为交叉轴

    操作容器内部(布局):

    可理解为串糖葫芦 ------ 布局时,把各个区域分为用竹签串起来,(可以横向串,可以纵向串),每个单独的区域可想像成山楂
    • 可控制从横向串纵向串 ------flex-direction

    • 竹签太长可换行 ------flex-wrap

    • 通过改变竹签的位置去改变整体的位置 (整体靠上、整体靠下、整体居中) ------ justify-content(横向对齐方式)、align-items (纵向对齐方式)

    • 山楂可大小、形状不一------flex-shrink、flex-grow、flex-basic 属性控制每个单独的区域占父级元素的几分之几,或者等分

    • 可变换串糖葫芦时每个山楂的先后顺序,即每个山楂的位置 ------order属性控制

    • 某个山楂想脱离竹签自己去占位 ------ align-self

    以上为我对flex对理解,由于阮大神写的文章实在太过详细,便不仔细介绍!

         

  • 相关阅读:
    linux学习之线程篇(二)
    linux学习之线程篇(一)
    linux学习之进程篇(四)
    linux学习之信号篇(二)
    linux学习之信号篇(一)
    myshell案例
    linux学习之gdb调试工具篇
    linux学习之Makefile篇
    linux学习之进程篇(三)
    Linux常用命令-1
  • 原文地址:https://www.cnblogs.com/sunweinan/p/flex.html
Copyright © 2011-2022 走看看