zoukankan      html  css  js  c++  java
  • 彻底搞懂flex弹性盒模型布局

    为什么要用flex

    基于css3简单方便,更优雅的实现,浏览器兼容性好,传统的css实现一个div居中布局要写一堆代码,而现在几行代码就搞定了,没有理由不用flex。

    兼容性:

    Base Browsers: IE8.0+, Firefox40.0+, Chrome40.0+, iOS8.0+, Android4.4+, Opera40.0+

    flex属性的分类

    我们先来概览一下flex的所有属性,属性看似多杂,其实分为两大类:

    flex container

    • flex-flow (复合属性,包含以下两个)
      • flex-direction (方向x轴,y轴)
      • flex-wrap (是否换行)
    • align-content (y轴对齐方式)
    • justify-content (x轴对齐方式)
    • align-items (flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式。)

    flex items

    • flex (复合属性,包含以下三个)
      • flex-grow (扩展比率)
      • flex-shrink (收缩比率)
      • flex-basis (伸缩基准值)
    • align-self (flex子项单独在y轴对齐方式)
    • order (排序)

    看不懂这一堆属性也没关系,来感受一下实例

    实践

    理解flex的核心就是区分好flex container和flex items,我们就做一个简单的实例:

    总结

    flex布局很灵活,可以多种搭配,理解了flex container和flex items也就理解了flex弹性盒模型布局

    参考资料

  • 相关阅读:
    Async、Await
    CommandLineParser命令行解析类
    Dispose in c#
    授权oAuth
    Hadoop技术内幕1——源代码环境准备
    postgreSql——时区问题
    Linux命令3——c
    Linux命令2——b
    Linux命令1——a
    hadoop的Linux操作
  • 原文地址:https://www.cnblogs.com/lostyu/p/flex_layout.html
Copyright © 2011-2022 走看看