弹性盒属相文档详细介绍
display:flex;
声明本元素是弹性盒容器
如果目标元素是行内元素 使用display:inline-flex;
flex-direction
| 取值 | 描述 |
|---|---|
| row | 默认值 ,弹性盒子元素按X轴方向顺序排列 |
| row-reverse | 弹性盒子元素按照X轴风向逆序排列 |
| column | 弹性盒子元素按照Y轴方向顺序排列 |
| column-reverse | 弹性盒子元素按照Y轴方向逆序排列 |
flex-wrap
| 取值 | 描述 |
|---|---|
| nowrap | 默认值，flex子元素只会单行显示，flex子元素过多会溢出容器，不会开始新行 |
| wrap | flex子元素可以显示多行，超出的部分会放到新行 |
| wrap-reverse | flex子元素可以显示多行，只不过会反转显示（不是逆序） |
justify-content
设置子元素在X轴方向的排列
| 取值 | 描述 |
|---|---|
| flex-start | 弹性盒子元素以起始元素对齐（类似与不改变子元素顺序的 左 浮动） |
| flex-end | 弹性盒子元素以结束位置对齐（类似与不改变子元素顺序的右浮动） |
| center | 弹性盒子元素向行中间位置显示 |
| space-between | 弹性盒子元素平均的分布在行里，第一个与起始位置边界对其，最后一个以结束位置边界对齐 |
| space-around | 弹性盒子元素会平均的分布在行里，两端保留了子元素与子元素之间距离大小的一半（两端指得是起始位置和结束位置） |
align-items
设置子元素在X轴方向的排列
| 取值 | 描述 |
|---|---|
| flex-start | 弹性盒子元素以起始元素对齐 |
| flex-end | 弹性盒子元素以结束位置对齐 |
| center | 弹性盒子元素向行中间位置显示 |
| baseline | 如果弹性盒子元素的行内轴与侧轴为同一条，则该值与flex-start等效，其他情况下，该轴将与参与基线对齐 |
| stretch | 如果指定侧轴大小属相值为“auto”，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照“min/max-width/height”属相的限制 |
order
设置弹性盒子元素出现的顺序 值为： Number
flex
简写方式:flex:1 0 auto;
| 属相 | 取值 |
|---|---|
| flex-grow(扩展比率) | Number |
| flex-shrink(收缩比) | Number |
| flex-basis(宽度像素值) | Number/auto |
align-self
可以覆盖align-items属相用于设置单个子元素如何沿着Y轴排列 （其取值和align-item类似）
| 取值 | 描述 |
|---|---|
| flex-start | 弹性盒子元素以起始元素对齐 |
| flex-end | 弹性盒子元素以结束位置对齐 |
| center | 弹性盒子元素向行中间位置显示 |
| baseline | 如果弹性盒子元素的行内轴与侧轴为同一条，则该值与flex-start等效，其他情况下，该轴将与参与基线对齐 |
| stretch | 如果指定侧轴大小属相值为“auto”，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照“min/max-width/height”属相的限制 |
flex-flow
flex-flow是flex-wrap和flex-direction的简写，用于排列弹性盒子元素
注意
注意以下属相对弹性盒不起作用
- 弹性容器中的每一个子元素变为一个弹性子元素，弹性容器直接包含的文本变为匿名的弹性盒子元素
- 多列布局中olumn-*属相对弹性子元素无效
- float 和 clear 对弹性子元素无效。使用float会导致display属相计算为block。
- vertical-align 对弹性盒子元素的对齐无效。
本教程中带有小括号的均是个人理解 如有瑕疵，请指出！感谢！！！
原文地址：https://www.cnblogs.com/ningzy/p/9126340.html
时间： 2024-10-07 14:45:47