====== 差别 ======
这里会显示出您选择的修订版和当前版本之间的差别。
前端基础_css_flex布局.md [2021/09/23 12:39] 若愚 创建 |
前端基础_css_flex布局.md [2021/09/23 12:51] (当前版本) 若愚 |
||
---|---|---|---|
行 15: | 行 15: | ||
``` | ``` | ||
## flex-direction | ## flex-direction | ||
+ | ![](: | ||
- | ![image](http:// | ||
设置或检索伸缩盒对象的子元素在父容器中的位置 | 设置或检索伸缩盒对象的子元素在父容器中的位置 | ||
行 34: | 行 34: | ||
## flex-wrap | ## flex-wrap | ||
- | ![image](http:// | + | ![](:wiki:flex-2.png) |
设置或检索弹性盒模型对象的子元素超出父容器时是否换行 | 设置或检索弹性盒模型对象的子元素超出父容器时是否换行 | ||
行 58: | 行 58: | ||
## justify-content | ## justify-content | ||
- | ![image](http:// | + | ![](:wiki:flex-3.png) |
设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式,当弹性盒里一行上的所有子元素都不能伸缩或已经达到其最大值时,这一属性可协助对多余的空间进行分配。当元素溢出某行时,这一属性同样会在对齐上进行控制 | 设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式,当弹性盒里一行上的所有子元素都不能伸缩或已经达到其最大值时,这一属性可协助对多余的空间进行分配。当元素溢出某行时,这一属性同样会在对齐上进行控制 | ||
行 76: | 行 76: | ||
## align-items | ## align-items | ||
- | ![image](http:// | + | ![](:wiki:flex-4.png) |
设置或检索弹性盒子元素在侧轴(纵轴)方向上的对齐方式 | 设置或检索弹性盒子元素在侧轴(纵轴)方向上的对齐方式 | ||
行 94: | 行 94: | ||
## align-content | ## align-content | ||
- | ![image](http:// | + | ![](:wiki:flex-5.png) |
设置或检索弹性盒堆叠伸缩行的对齐方式 | 设置或检索弹性盒堆叠伸缩行的对齐方式 | ||
行 120: | 行 120: | ||
## order | ## order | ||
- | ![xiedaimala.com](http:// | + | ![](:wiki:flex-6.png) |
在默认情况下flex order会按照书写顺训呈现,可以通过`order`属性改变,数值小的在前面,还可以是负数 | 在默认情况下flex order会按照书写顺训呈现,可以通过`order`属性改变,数值小的在前面,还可以是负数 | ||
行 161: | 行 161: | ||
- | ![image.png](// | + | ![](:wiki:flex-7.png) |
行 179: | 行 180: | ||
- | ![xiedaimala.com](// | + | ![](:wiki:flex-8.png) |
容器的宽度为400px, | 容器的宽度为400px, | ||
行 201: | 行 202: | ||
## align-self | ## align-self | ||
- | ![image](http:// | + | ![](:wiki:flex-9.png) |
设置或检索弹性盒子元素在侧轴(纵轴)方向上的对齐方式,可以覆盖父容器`align-items`的设置 | 设置或检索弹性盒子元素在侧轴(纵轴)方向上的对齐方式,可以覆盖父容器`align-items`的设置 |