flex笔记

父元素设置display:flex;
子元素自动成为其成员,仅子元素;

父元素6个属性

  1. flex-direction
    子元素排列方向
  2. flex-wrap
    子元素超出父元素是否换行
  3. flex-flow
    上面两个属性的缩写
  4. justify-content
    子元素在横轴的对其方式(左对齐右对齐等)
  5. align-items
    子元素在竖轴的对齐方式(上中下)设置为上对其时,每行均匀占比高,然后所有的子元素在每行中上对其
  6. align-content
    子元素在竖轴上的对其方式(主要作用于多行),设置为上对其时,所有子元素往上靠

子元素6个属性

  1. order
    子元素的排列顺序,默认为0.小的显示在前面
  2. flex-grow
    放大比例,多行没排满的情况下也有效
  3. flex-shrink
    缩小比例,多行情况下不存在空间不够的情况,不起作用
  4. flex-basis
    在设置放大缩小的时候,可以设置一个值用来作为放大缩小的值而省略掉元素本身设置的宽或者高;其缩放效果与直接设置宽高的效果一样
  5. flex
    以上3个的缩写
  6. align-self
    设置单个子元素垂直方向对其属性,覆盖align-items的值
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • H5移动端知识点总结 阅读目录 移动开发基本知识点 calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇阅读 10,139评论 0 26
  • 移动开发基本知识点 一.使用rem作为单位 html { font-size: 100px; } @media(m...
    横冲直撞666阅读 8,913评论 0 6
  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 9,987评论 0 0
  • CSS 是什么 css(Cascading Style Sheets),层叠样式表,选择器{属性:值;属性:值}h...
    崔敏嫣阅读 5,362评论 0 5
  • 弹性盒模型Flex指南 Web layout 是Web UI中的基础架构, 重要性不言而喻. 传统的盒模型, 借助...
    raining_804f阅读 3,437评论 0 0

友情链接更多精彩内容