zoukankan      html  css  js  c++  java
  • Flexbox-CSS3弹性盒模型flexbox完整版教程

    http://caibaojian.com/flexbox-guide.html

    基础知识

    由于flexbox是一个整体模块,而不是单一的一个属性,它涉及到了很多东西,包括它的整个属性集。它们之中有一些是在父容器上设置,而有一些则是在子容器上设置。

    如果经常布局基于块和内嵌流方向,柔性布局基于“柔性流动方向”。请看看这个数字从规范,解释背后的柔性布局的主要思路。

    属性介绍

    display: flex | inline-flex; (适用于父类容器元素上)

    定义一个flex容器,内联或者根据指定的值,来作用于下面的子类容器。

    • box:将对象作为弹性伸缩盒显示。(伸缩盒最老版本)(css3
    • inline-box:将对象作为内联块级弹性伸缩盒显示。(伸缩盒最老版本)(CSS3
    • flexbox:将对象作为弹性伸缩盒显示。(伸缩盒过渡版本)(CSS3
    • inline-flexbox:将对象作为内联块级弹性伸缩盒显示。(伸缩盒过渡版本)(CSS3)
    • flex:将对象作为弹性伸缩盒显示。(伸缩盒最新版本)(CSS3)
    • inline-flex:将对象作为内联块级弹性伸缩盒显示。(伸缩盒最新版本)(CSS3)
    请注意:

    1.css 列(CSS columns)在弹性盒子中不起作用

    2.floatclear and vertical-align 在flex项目中不起作用

    原文链接:Flexbox-CSS3弹性盒模型flexbox完整版教程 版权所有,转载时请注明出处,违者必究。
    注明出处格式:前端开发博客 (http://caibaojian.com/flexbox-guide.html)

  • 相关阅读:
    json基础
    css语法以及css选择器
    HTML语义化标签
    CSS插入的四种方式
    Hibernate主键生成策略及选择
    HIbernate处理数据更新丢失
    数据库的四大特性以及事务的隔离级别
    MD5加密
    redis主从复制
    redis的持久化方案
  • 原文地址:https://www.cnblogs.com/mmzuo-798/p/5541476.html
Copyright © 2011-2022 走看看