zoukankan      html  css  js  c++  java
  • CSS.flex见解

    Flex 是 flexible 的缩写,意思为弹性布局,弹性盒。用来为盒模型提供最大的灵活性。
    任何一个容器都可以指定为 flex 布局( 包括行内元素 ):

    <div> display :flex </div>

    设置flex之后,float等样式都会失效。。。。

    • 常规布局:

      • 块级元素自上而下排列
      • 元素只有高度,没有宽度时,宽度默认100%
      • 元素只有宽度,没有高度时,高度为 0
    • flex 布局

      • 容器内元素默认从左往右排列
      • 元素只有高度,没有宽度时,宽度为 0
      • 元素只有宽度,没有高度时,高度默认100%

    成为 flex 容器的元素默认有两条轴:水平主轴(main axis)和垂直交叉轴(cross axis),单个项目占据的主轴空间称为 main size,交叉轴为 cross size

           Flex属性值

    • flex-direction 改变主轴的方向,默认为 row 横向排列。属性包含 row | row-reverse | column | column-reverse
    • flex-wrap 控制元素换行。属性包含 nowrap | wrap | wrap-reverse
    • align-content 控制多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。属性包含 flex-start | flex-end | center | space-between | space-around | stretch
    • justify-content 控制在主轴上的对齐方式。属性包含 flex-start | flex-end | center | space-between | space-around
    • align-items 控制交叉轴上如何对齐。包含的属性有 flex-start | flex-end | center | baseline | stretch
    • align-self 属性允许单个项目有与其他项目不一样的对齐方式。包含的属性 auto | flex-start | flex-end | center | baseline | stretch
    • order 属性控制元素的排列顺序,数值越小,排列越靠前。
    • flex-grow 属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。
    • flex-shrink 属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
    • flex-basis 属性定义了项目占据主轴的空间,默认为 auto ,即元素本来大小。
    • flex 属性是 flex-grow, flex-shrink 和 flex-basis 的简写,默认值为0 1 auto
  • 相关阅读:
    checkbox的问题整理
    通过阅读ASP.NET MVC5 框架解密 路由的一点心得
    用JS实现避免重复加载相同js文件
    如何给一个网站设置子网站
    Linux环境下Python的安装过程
    linux下更新Python版本并修改默认版本
    【引用】如何读技术类书籍
    专业收藏_资格证书
    ASP.NET单元测试配置文件
    面试收集
  • 原文地址:https://www.cnblogs.com/zx-qd/p/10516948.html
Copyright © 2011-2022 走看看