css3弹性布局

  ***弹性布局   * 为数字

  1.***让他弹性布局
   
  display:flex;
  

  2.分配固定多少px;

  flex-basis: * px;
  
  //设置一个值拥有多少宽;


  3.剪除之后设置多少份
 
   flex: * ;

  //把一个盒子分割成*份
  
  **弹性布局显示换行
 
   flex-wrap:wrap;

 //如果屏幕缩小;让屏幕里的装不下的子元素换行;


  **元素再水平方向对齐

  justify-content:
           
             space-around,//左右分开
         
             space-between,

            center, //居中

           flex-start,//向上

          flex-end //向下

  **元素在垂直方向的对齐方式

   align-items: center 中间  
          
             flex-start 顶部对齐

          flex-end  底部对齐

     //给父元素设置多个同步;
    

   *给子元素设置
    align-self: flex-start //向上 //向左
   
    align-self: flex-end; //向下 //向右


   *元素纵向排列

   flex-direction: column(纵排); row(横排)一般默认为row(横排);除非主动设置  


   *在侧轴方向每一行的对齐方式,只能控制一行*
   align-content:center;

  
 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值