web前端布局之flex布局

  1. 总的来说,flex布局的原理通过给父元素添加flex属性,来控制子元素的位置和排列方式。
  2. 采用flex布局的元素称为flex容器。
  3. flex容器中存在两条轴,分别为主轴和侧轴,容器中的每个单元称为flex项目。
  4. 在容器上可以设置6个属性:分别为:(flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content这样说可能会好记一点)
    • flex-direction 设置主轴的方向;(有4个属性值:row、row-reverse、column、column-reverse)
    • justify-content设置主轴子元素排列方式(有5个属性值:flex-start、flex-end、center、space-around、space-between)
    • flex-wrap设置子元素是否换行(有两个属性值:nowrap、wrap)
    • align-items设置侧轴子元素排列方式,单行(有4个属性:flex-stsrt、flex-end、center、stretch)
    • align-content设置侧周子元素排列方式,多行(有6个属性:flex-start、flex-end、center、space-around、space-between、stretch)
    • flex-flow是flex-direction和flex-wrap的合写。

5.但要注意的是,但设置了flex布局之后,子元素的float、clear、vertical-align的属性将会失效。

6.另外,flex布局的flex项目上可以设置3 个属性:分别为

  • flex属性,定义子项目分配剩余空间,f用flex来表示占多少份数
  • order属性,定义自项排列顺序,数值越小,排列越靠前,默认为0
  • align-self属性,设置自项自己在侧轴上额排列方式
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值