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
  • 相关阅读:
    揭秘重度MMORPG手游后台性能优化方案
    算法:贪心、回溯(su)、分治、动态规划,思想简要
    表单提交 curl和浏览器方式
    mysql 聚集索引,非聚集索引,覆盖索引区别。
    虚拟机中的Linux不能上网
    第二篇 界面开发 (Android学习笔记)
    第一篇 入门必备 (Android学习笔记)
    C/C++知识补充 (1)
    向后/向前引用, 零宽断言, 转义, 命名分组
    C/C++知识补充(2) C/C++操作符/运算符的优先级 & 结合性
  • 原文地址:https://www.cnblogs.com/zx-qd/p/10516948.html
Copyright © 2011-2022 走看看