flex实验总结

1、父元素

.box{
     display:flex;
     flex-direction: column;//铺满垂直排列
     flex-direction: column-reverse;//铺满垂直反向排列
     flex-direction: row;//默认排列
     flex-direction: row-reverse;//反向排列
}
.box{
     display:flex;
     flex-wrap: nowrap;//不换行
     flex-wrap: wrap;//默认换行
     flex-wrap: wrap-reverse;//反向换行
}
.box {
  flex-flow: <flex-direction> || <flex-wrap>;//前面两种的简写默认值为row nowarp
}
.box{
     display:flex;
     justify-content: flex-start;//左对齐
     justify-content: flex-end;//右对齐
     justify-content: center;//居中
     justify-content: space-between;//平均分散
     justify-content: space-around;//平均外边距
}
.box{
     display:flex;
     align-items: stretch;//自定义铺满高度
     align-items: baseline;//文字按照基线对齐
     align-items: center;//垂直居中
     align-items: flex-end;//垂直下
     align-items: flex-start;//垂直上
}
.box{
     display:flex;
     align-content: stretch;//垂直铺满
     align-content: space-around;//同样边距
     align-content: space-between;//上下满外边距
     align-content: center;//垂直居中
     align-content: flex-end;//垂直居下
     align-content: flex-start;//垂直居上
}

2、子元素

.item {
  order: <integer>;//子元素的数值越大,越靠前
}
.item {
  flex-grow: <number>; //放大比例,根据数字放大
}
.item {
  flex-shrink: <number>;//缩小比例,根据数字缩小
}
.item {
  flex-basis: <length> | auto;//子元素的大小,可以设置宽度
}
.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]//flex-growflex-shrink 和 flex-basis的简写
}
.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;//允许单个项目有与其他项目不一样的对齐方式
}

  

转载于:https://www.cnblogs.com/huangqiming/p/6245931.html

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

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值