- 弹性父元素设置
弹性盒是一种新的布局形式,可以决定弹性子元素的显示效果,可以自动设置弹性子元素中间的空隙,还能实现弹性子元素随着父元素的变大而变大,缩小而缩小
弹性盒里包含弹性子元素
- 将盒子设置为弹性盒 display:flex;
- 弹性子元素的排列方式 flex-direction
Row 默认值 自左向右
Row-reverse 自左向右的翻转
Column 自上而下
Column-reverse 自上而下的翻转
- 弹性子元素的主轴对齐方式justify-content
Flex-start 左 上
Flex-end 右 下
Center 居中
Space-between 两端对齐
Space-around 中间是两端的倍数
Space-evenly 所有空隙都一样 平均分配
那个方向是主轴取决于弹性子元素的排列方式:如果是自左向右排列x轴为主轴
如果是自上而下排列y轴为主轴
- 弹性子元素侧轴对齐方式align-items
Stretch:弹性子元素的高度与父元素的高度一样(如果子元素不设置高度默认就是一样)
Flex-start: 竖着排列 上 横着排列 左
Flex-end 竖着排列 下 横着排列 右
Center 居中
Baseline 基线对齐
- 是否允许弹性子元素换行属性flex-wrap
如果弹性子元素的总宽度超过弹性父元素的总宽度时,弹性子元素默认情况下不会换行显示,或缩小弹性子元素的宽度,缩小到只能放下弹性子元素内容的宽度,次数如何还有超出,会显示溢出效果,也不会换行显示
Nowrap:默认值 不允许换行
Wrap:允许换行
Wrap-reverse:允许换行并行翻转
- 弹性子元素行的控制属性align-content
注意:只有弹性子元素存在换行属性时此属性才能生效
Flex-start 上
Flex-end 下
Center 居中
Space-between 两端
Space-around 中间是两端的倍数
Space-evenly 平均分配
- Flex-direction与flex-wrap的缩写flex-flow
- 弹性子元素设置
- 设置弹性子元素的显示顺序 order 默认值0
值越小越靠前显示 可以设置为负值
- 设置弹性子元素的宽度 flex-basis 相当于width 默认值auto
- 平分父元素剩余的空间flex-grow 默认值0
- 是否允许弹性子元素进行收缩 flex-shrink 默认值1 允许 0不允许
- 平均分配弹性父元素 设置弹性子元素所占份数flex
Flex是flex-grow flex-shrink flex-basis的缩写 默认值0 1 auto
- 设置弹性子元素单个的对齐方式 align-self
Baseline 基线
Stretch 和父元素的高度一样
Center 居中
Flex-start 上 左
Flex-end 下 右
- 媒体查询