CSS学习(二十一)-flexbox模型之二_html/css_WEB-ITnose

html教程评论117 views阅读模式

一、理论:

1.flex-flow

a.flex-direction 设置伸缩容器的伸缩流方向

b.flex-wrap 设置伸缩容器中的伸缩项目在伸缩容器无足够空间时,伸缩项目在伸缩容器中是否换行排列

2.flex-pack

a.具有与box-pack属性相同的参数

b.distribute 伸缩项目会平均分布在同一行里

c.start 伸缩容器中的第一个伸缩项目的起始边缘置于伸缩容器的主轴起始;下一个伸缩项目的起始边缘与第一个伸缩项目的末尾边缘紧挨在一起,其他伸缩项目依次沿着主轴依次排列。伸缩容器沿着布局轴方向的所有额外空间都被置于布局轴的末尾

d.end 所起效果与start相反

e.center 所有伸缩项目边挨边放置在一起

f.justify 所有伸缩项目会平均分配在行里,沿着伸缩容器布局轴方向的任何额外空间都被平均分布于各个伸缩项目之间

3.flex-align

a.具有box-align的所有属性

b.stretch 伸缩项目拉伸填充整个伸缩容器。

二、实践:

1.

    
     Title        
         
  
   Box1
          
  
   Box2
          
  
   Box3
          
  
   Box4
          
  
   Box5
          
  
   Box6
      
 

2.

    
     Title        
         
  
   Box1
          
  
   Box2
          
  
   Box3
          
  
   Box4
          
  
   Box5
          
  
   Box6
      
 

3.

    
     Title    
     
  
   Box1
      
  
   Box2
      
  
   Box3
      
  
   Box4
      
  
   Box5
      
  
   Box6
  
 

三、其它:

1.以上三个都没有实现效果。不知哪位朋友知道原因前来指教一下。十分感谢:)

企鹅博客
  • 本文由 发表于 2020年7月10日 01:00:02
  • 转载请务必保留本文链接:https://www.qieseo.com/364759.html

发表评论