CSS

flex 弹性布局

联系站长 作者:web知道 来源:未知 2019-12-05 12:15 我要评论

flex 弹性布局...

父项
display:flex;  把盒子变成伸缩盒子
添加了display:flex 不会对布局有影响的!!!
 
子项
1.不存在行内块级元素,直接块宽高
2.浮动没有效
3.定位有效果
4.2 默认宽度 由内容撑开 高度 和父项一样高(父项中使用 align-items:stretch 去掉默认宽度或高度)
使用align-items:flex-start去除
5 子项可以作为父项
6.防止隔壁模块撑开使另一个元素变形
  flex-grow 放大
  flex-shrink 缩小 0 、1
  
  放大指定的宽度
  flex-basis:100rpx/upx



设置主轴的方向
      flex-direction:
        row 行 从左到右 默认值
        row-reverse  从右到左
        column 列 从上到下 
        column-reverse 列 下到上
        
换行
flex-wrap: wrap;nowrap默认不换行
 
设置主轴-子项的对齐方式
      justify-content
      flex-start 左对齐
      flex-end  右对齐
      center 居中显示
      space-between 先两边显示 剩下 元素平分空间
      space-around 空白环绕 子项平分空间
      
设置侧轴子项的对齐方式
    单行 align-items:
          flex-start  上对齐
          flex-end 下对齐
          center 居中 
          base-line
    
    多行 align-content
          flex-start  上对齐
          flex-end 下对齐
          center 居中 
          space-between 先两边 再平分空白
          space-around  空白环绕
    
 
如果主轴方向是从上到下,那么主轴就是Y,侧轴是X
 
设置子项占父元素的宽度份数
flex:1
     不要和width一起使用
     不要和父项的换行进行使用
 
设置子项自己在侧轴上的对齐方式   重置子项的align-items的对齐方式
align-self
    flex-start
    flex-end
    center
    
设置子项自己在主轴上排列顺序
order
  1 默认值  0
  2 谁的值越小就越靠前
 




本文如有侵犯版权请联系站长删除。

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源;3.作者投稿可能会经我们编辑修改或补充。

相关文章
网友点评
精彩导读