Flex布局
布局重要的概念
2个重要概念
- 开启flex 布局的元素叫container
- flex container里面的直接子元素叫flex item
flex item具备的特点
- flex item的布局将受flex container属性的设置来进行控制和布局
- flex item不再严格区分块级元素和行内级元素
- flex item默认情况下是包裹内容的，但是也可以设置高度和宽度
如何设置flex布局
- 通过display属性来设置flex布局
- flex： flex container以block-level形式存在
- inline-flex：flex container以inline-level形式存在
flex相关的属性
flex container可以使用的属性
flex-direction
- 设置主轴的方向
- row(默认)、row-reverse、column、column-reverse
flex-wrap
- 是否多行显示
- nowrap(默认)、wrap(多行显示)、wrap-reverse(多行，cross-start与cross-end相反)
flex-flow
- 是flex-direction和flex-wrap的缩写
- 顺序可以任意，可以省略其中一个
justify-content
- 设置flex item在主轴(mian axis)上的对齐方式
- flex-start(默认值)：与main start对齐
- space-between
- flex items之间的距离相等
- 与main start、main end 两端对齐
- space-around
- flex items 之间的距离相等
- flex items与main start、mian end之间的距离是flex items之间距离的一半
- space-evenly
- flex items之间的距离相等
- flex items与main start、main end之间的距离等于flex items之间的距离
align-items
- 设置flex item在交叉轴(cross axis)上的对齐方式
- normal：在弹性布局中，效果和stretch一样
- stretch：当flex items在cross axis 方向的size为auto时，会自动拉伸至填充flex container
- 交叉轴方向的大小为auto，例如：flex-direction:row，items的height:auto时，items的height将会自动拉伸至填充
- flex-start：与cross start对齐
align-content
- 将多行flex items在cross axis 上的对齐方式，用法与justify-content类似
- stretch(默认值)：与align-items的stretch类似
- flex-start：与cross start对齐
- space-between
- flex items之间的距离相等
- 与main start、main end 两端对齐
- space-around
- flex items 之间的距离相等
- flex items与main start、mian end之间的距离是flex items之间距离的一半
- space-evenly
- flex items之间的距离相等
- flex items与main start、main end之间的距离等于flex items之间的距离
flex item可以设置的属性
order
- 决定flex items的排列顺序
- 可以设置任意整数(正整数、负整数、0)，值越小越靠前
- 默认值为0
align-self
- 覆盖flex container设置的align-items
- auto(默认值)：遵从flex container的align-items设置
- stretch、flex-start、flex-end、center、baseline，效果跟align-items一致
flex-grow
- 决定flex items如何扩展(拉伸/成长)
- 可以设置任意非负数字(正小数、正整数、0)，默认值为0
- 仅当flex container在mian axis 方向上有剩余size时，flex-grow属性才会生效
- flex items扩展后的最终size不能超过max-width/max-height
flex-shrink
- 决定了flex items如何收缩
- 可以设置任意非负数字(正小数、正整数、0)，默认值为1
- 当flex items在main axis方向上超过了flex container的size，flex-shrink属性才会有效
- flex items收缩后的最终size不能小于min-width\min-height
flex-basis
- 用于设置flex items在mian axis 方向上的base size
- auto(默认值)
- 决定flex items最终base size的因素，从优先级高到低
- max-width\max-height\min-width\min-height
- flex-basis
- width\height
- 内容本身的size
flex
- 是flex-grow、flex-shrink、flex-basis的缩写
- 可以指定1个、2个或者3个
- 单值：
- 一个无单位的值：会被定义为
<flex-grow>的值
- 一个有单位的值，会被定义为
<flex-basis>的值
- 双值
- 第一个值必须是无单位的值，会被定义为
<flex-grow>的值
- 第二个值：
- 如果有单位，则
<flex-basis>的值
- 如果无单位，则
<flex-shrink>的值
- 第一个无单位的值，
<flex-grow>
- 第二个无单位的值，
<flex-shrink>
- 第三个有单位的值，
<flex-basis>
