饥人谷Wiki

站点工具

用户工具

====== 差别 ======

这里会显示出您选择的修订版和当前版本之间的差别。

到此差别页面的链接

前端基础_css_flex布局.md [2021/09/23 12:39]
若愚 创建 		前端基础_css_flex布局.md [2021/09/23 12:51] (当前版本)
若愚
行 15: 行 15:
 ``` ```
 ## flex-direction ## flex-direction
 +![](:wiki:flex-1.png)
  
-![image](http://cdn.css-tricks.com/wp-content/uploads/2014/05/flex-direction1.svg) 
  
 设置或检索伸缩盒对象的子元素在父容器中的位置 设置或检索伸缩盒对象的子元素在父容器中的位置
行 34: 行 34:
 ## flex-wrap ## flex-wrap
  
-![image](http://cdn.css-tricks.com/wp-content/uploads/2014/05/flex-wrap.svg)+![](:wiki:flex-2.png)
  
 设置或检索弹性盒模型对象的子元素超出父容器时是否换行 设置或检索弹性盒模型对象的子元素超出父容器时是否换行
行 58: 行 58:
 ## justify-content ## justify-content
  
-![image](http://cdn.css-tricks.com/wp-content/uploads/2013/04/justify-content.svg)+![](:wiki:flex-3.png)
  
 设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式，当弹性盒里一行上的所有子元素都不能伸缩或已经达到其最大值时，这一属性可协助对多余的空间进行分配。当元素溢出某行时，这一属性同样会在对齐上进行控制 设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式，当弹性盒里一行上的所有子元素都不能伸缩或已经达到其最大值时，这一属性可协助对多余的空间进行分配。当元素溢出某行时，这一属性同样会在对齐上进行控制
行 76: 行 76:
 ## align-items ## align-items
  
-![image](http://cdn.css-tricks.com/wp-content/uploads/2014/05/align-items.svg)+![](:wiki:flex-4.png)
  
 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式
行 94: 行 94:
 ## align-content ## align-content
  
-![image](http://cdn.css-tricks.com/wp-content/uploads/2013/04/align-content.svg)+![](:wiki:flex-5.png)
  
 设置或检索弹性盒堆叠伸缩行的对齐方式 设置或检索弹性盒堆叠伸缩行的对齐方式
行 120: 行 120:
 ## order ## order
  
-![xiedaimala.com](http://cdn.css-tricks.com/wp-content/uploads/2013/04/order-2.svg)+![](:wiki:flex-6.png)
  
 在默认情况下flex order会按照书写顺训呈现，可以通过`order`属性改变，数值小的在前面，还可以是负数 在默认情况下flex order会按照书写顺训呈现，可以通过`order`属性改变，数值小的在前面，还可以是负数
行 161: 行 161:
  
  
-![image.png](//cloud.hunger-valley.com/18-7-4/47108098.jpg)+![](:wiki:flex-7.png) 
  
  
行 179: 行 180:
  
  
-![xiedaimala.com](//cloud.hunger-valley.com/18-7-4/37318637.jpg)+![](:wiki:flex-8.png)
  
 容器的宽度为400px, 子项1的占用的基准空间(flex-basis)为250px，子项2占用的基准空间是150px，子项3占用基准空间是100px，总基准空间为 250+150+100=500px。容器放不下，多出来的空间需要被每个子项根据自己设置的flex-shrink 进行吸收。 子项1的flex-shrink: 1(未设置默认为1)， 子项2 flex-shrink: 2，子项3 flex-shrink: 2。子项1需要吸收的的空间为 `(250*1)/(250*1+150*2+100*2) * 100 = 33.33px`，子项1真实的空间为 250-33.33 = 216.67px。同理子项2吸收的空间为`(150*2)/(250*1+150*2+100*2) * 100=40px`，子项2真实空间为 `150-40 = 110px`。子项3吸收的空间为`(100*2)/(250*1+150*2+100*2) * 100 = 26.67px`，真实的空间为`100-26.67=73.33px`。 容器的宽度为400px, 子项1的占用的基准空间(flex-basis)为250px，子项2占用的基准空间是150px，子项3占用基准空间是100px，总基准空间为 250+150+100=500px。容器放不下，多出来的空间需要被每个子项根据自己设置的flex-shrink 进行吸收。 子项1的flex-shrink: 1(未设置默认为1)， 子项2 flex-shrink: 2，子项3 flex-shrink: 2。子项1需要吸收的的空间为 `(250*1)/(250*1+150*2+100*2) * 100 = 33.33px`，子项1真实的空间为 250-33.33 = 216.67px。同理子项2吸收的空间为`(150*2)/(250*1+150*2+100*2) * 100=40px`，子项2真实空间为 `150-40 = 110px`。子项3吸收的空间为`(100*2)/(250*1+150*2+100*2) * 100 = 26.67px`，真实的空间为`100-26.67=73.33px`。
行 201: 行 202:
 ## align-self ## align-self
  
-![image](http://cdn.css-tricks.com/wp-content/uploads/2014/05/align-self.svg)+![](:wiki:flex-9.png)
  
 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式，可以覆盖父容器`align-items`的设置 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式，可以覆盖父容器`align-items`的设置
若愚 · 2021/09/23 12:39 · 前端基础_css_flex布局.md.1632371941.txt.gz
公众号 | 前端交流群 | 饥人谷版权所有 | 购买课程

页面工具