Flex布局

Flex布局

在flex中，没有x和y轴，这里称之为主轴和交叉轴

应用在flex container 上的css属性

• flex-flow 缩写属性 => flex-direction || flex-wrap
• flex-direction 决定flex-item排序方向
• flex-wrap 决定flex-item是否换行 //默认在同一行显示
• justify-content 决定flex-item在主轴的对齐方式
• aligin-items 决定flex-item在交叉轴的对齐方式
• align-content 决定多行flex-item在交叉轴的对齐方式

注意：使用justify-content时不要给item用flex，给item固定宽度即可


应用在flex items 上的css属性

• flex
• flex-grow 成长，意为增加flex-item的宽度。当flex-grow总和大于1时，把剩余的size分给对应item，并占满父元素宽度 当总和小于1时，则分配剩余size的百分比
• flex-basis 决定flex-item的宽度 //优先级 max-width/min-width > flex-basis > width >自身尺寸
• flex-shrink 收缩，和flex-grow相反，数值越大，收缩比例越高
• order 值越小，越排前面
• aligin-self 单独设置flex-item的交叉轴的对齐方式，覆盖aligin-items

flex

flex是flex-grow || flex-shrink || flex-basis 的简写，flex属性可以指定1个，2个或3个值

单值语法：值必须为以下其中之一：

• 一个无单位数（number）:它会被当做flex-grow的值
• 一个有效的宽度（width）值：它会被当做flex-basis的值
• 关键字none，auto或initial

双值语法：第一个无单位数字，并且它会被当做flex-grow的值

• 第二个值必须为以下：
  • 一个无单位数：它会被当做flex-shrink的值
  • 一个有效的宽度（width）值：它会被当做flex-basis的值

三值语法：flex-grow flex-shrink flex-basis