flex布局

1.flex direction :row/row-reverse/column/column-reverse

2.flex属性

flex元素不具有包裹性!  和块级元素类似  span元素flex后也会默认占一行

flex中伪元素也会加入flex元素  内部定位元素absolute fixed独立于静态元素也会受影响,之后再按left,top的值定位(定位元素即使zindex一样也不再同一层,zindex一样的后面的在上面,relative即使不一样也在同一层), float,clear,vertical-align会被忽略

overflow hidden也会影响定位元素

 flex:flex-grow,flex-shrink,flex-basis;

initial 默认  0 1 auto;

  flex:1       1  1  0%; 一般用来自适应  

  flex;none 0  0 auto;

  flex:auto  1  1  auto

 flex:10%   1   1  10% 

一般flex会根据basis计算后  auto代表自己设置的宽高,10%是代表父元素的百分比

分配空间  有多的或者少的空间(总空间-元素总basis占据空间)再根据各元素的grow或者shrink值相加   根据各元素占百分比计算   分配空间

 

3,align-items和align-content

items指单行元素在自己所在行的对其方式  一般在垂直居中使用

content指多行其在副轴上的对其方式

align-items默认为strech所以默认拉伸

space-evenly(等分空白区域)和space-around(每个元素等分空间,中间间距为二边的二倍)的区别

4.flex-direction  row column row-reverser

  flex- wrap   nowrap  wrap-reverse  wrap

  order  指定顺序

 

补充  flex父元素本身不具有包裹性(子元素有)

inlineflex可以包裹

这里有一个问题   当 flex column wrap时  宽度只能包裹住一列

解决办法  给父元素设置 为row  writingmode vertical-lr  子元素writing-mode lr

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值