flex properties (MDN的解释)

1. flex-item有关的属性

1.1 flex-shrink

The flex-shrink CSS property sets the flex shrink factor of a flex item. If the size of all flex items is larger than the flex container, items shrink to fit according to flex-shrink.
In use, flex-shrink is used alongside the other flex properties flex-grow and flex-basis, and normally defined using the flex shorthand.

1.2 flex-grow

The flex-grow CSS property sets the flex grow factor of a flex item main size. It specifies how much of the remaining space in the flex container should be assigned to the item (the flex grow factor).
main size如下图:

flex-desc.png

(其实就是flex-item在主轴上的长度)
The main size is either width or height of the item which is dependant on the flex-direction value.
The remaining space is the size of the flex container minus the size of all flex items' sizes together. If all sibling items have the same flex grow factor, then all items will receive the same share of remaining space, otherwise it is distributed according to the ratio defined by the different flex grow factors.

1.3 flex-basis

The flex-basis CSS property sets the initial main size of a flex item. It sets the size of the content box unless otherwise set with box-sizing.
flex-basis 优先级比 width 或 height 高。

1.4 order

order越小,对应的项目越靠前。

2. flex-container有关的属性

2.1 flex-flow: row wrap | column nowrap

2.2 justify-content

如果主轴是row, 同一行元素们在主轴方向上的对齐方式

2.3 align-items

如果主轴是row, 同一行元素们在交叉轴方向上的对齐方式

2.4 align-content

如果主轴是row, 多行在交叉轴上的对齐方式
比如:


align-content: space-around

align-content: stretch
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • rljs by sennchi Timeline of History Part One The Cognitiv...
    sennchi阅读 7,490评论 0 10
  • 文章目录0. 前言1. 基础概念2. 容器属性(父属性:Properties for the Parent)2.1...
    游云deb阅读 1,703评论 0 1
  • pyspark.sql模块 模块上下文 Spark SQL和DataFrames的重要类: pyspark.sql...
    mpro阅读 9,546评论 0 13
  • H5移动端知识点总结 阅读目录 移动开发基本知识点 calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇阅读 4,676评论 0 26
  • 移动开发基本知识点 一.使用rem作为单位 html { font-size: 100px; } @media(m...
    横冲直撞666阅读 3,560评论 0 6