卖坚果的怪叔叔 卖坚果的怪叔叔
  • 首页
  • 技术
  • 生活
  • 记录
  • 朋友
  • 常用代码
  • 关于
首页 › 技术 › Flex

Flex

坚果大叔
2018-06-03 12:55:34技术阅读数 276

flex:弹性盒子

父元素设置为 : display:flex;
如果是内联元素可以设置为:display: inline-fiex

属性:

flex-direction : 设置主轴的方向

参数 有  row(设置主轴水平方向起点在左边),row-reverse(设置主轴水平方向,起点在右边),column(设置主轴垂直方向起点在上边),,column-reverse(设置主轴垂直方向起点在下边)

flex-warp: 定义换行情况

参数:nowrap (没有任何操作),wrap(换行,第一行在上面),wrap-reserse(换行,第一行在上面,换行的在上面)

flex-flow

参数:nowrap, flex-direction,flex-wrap

justify-content : 定义项目在主轴上的对齐方式

参数:flex-start(默认,左对齐),flex-end(右对齐),center(居中),space-between(两端对齐,中间等距离间隔),space-around(每个项目之间等宽间隔)

align-item : 定义交叉轴上的对齐方式

参数: flex-start(起点对齐),flex-end(终点对齐),center(中点对齐),baseline(基于第一个的第一排文字对齐),stretch(默认,如果项目未设置高度或者设置的auto,将占满整个容器高度)

align-content:定义多跟轴线的对齐方式

参数:flex-start(与交叉轴的起点对齐),flex-end(与交叉轴的终点对齐),center(与交叉轴的中点对齐),space-between(与交叉轴的两端对齐,轴线之间的间隔平均分布),space-around(每根轴线两端间隔相等,即相邻的会比不相邻的大一倍),stretch(默认值,轴线占满整个交叉轴)

order: 定义项目的排列顺序

参数:数值越小,排列越靠前,默认为0,可以是负值。

flex-graw:定义项目的放大比例

参数:默认值为0,即如果空间有剩余,也不放大。可以是小数,按比例占据剩余空间。

flex-shrink:定义项目的缩小比例

参数:默认值都为1,即如果空间不足将等比例缩小。
如果有一个项目的值为0,其他项目为1,当空间不足时,该项目不缩小。
负值对该属性无效,容器不应该设置flex-wrap。

flex-basis属性:定义在分配多余空间之前,项目占据的主轴空间。

参数: 默认值为auto,浏览器根据此属性检查主轴是否有多余空间。

flex属性是flex-grow,flex-shrink和flex-basis的简写

默认值为0 1 auto,第一个属性必须,后两个属性可选。
Flex
赞赏 赞(0)
本文系作者 @坚果大叔 原创发布在 卖坚果的怪叔叔。未经许可,禁止转载。
前端性能优化
上一篇
浏览器本地存储
下一篇
今日天气
摸鱼日历
摸鱼人日历
近期文章
  • 猫🐱
  • Input 空格问题
  • Sort函数小Tips😁😃❤️😒😭😩😳
  • 🌎🌎🌎🌎🌎🌎🌎🌎🌎🌎🌎🌎
  • element-ui中的Select选择器中remote-method方法带自定义参数
归档
  • 2022年6月
  • 2022年5月
  • 2022年4月
  • 2022年3月
  • 2022年2月
  • 2022年1月
  • 2021年12月
  • 2021年11月
  • 2021年10月
  • 2021年9月
  • 2021年8月
  • 2021年7月
  • 2021年5月
  • 2021年4月
  • 2021年2月
  • 2021年1月
  • 2020年12月
  • 2020年11月
  • 2020年10月
  • 2020年9月
  • 2020年8月
  • 2020年7月
  • 2020年6月
  • 2020年5月
  • 2020年4月
  • 2020年3月
  • 2020年2月
  • 2020年1月
  • 2019年12月
  • 2019年11月
  • 2019年10月
  • 2019年9月
  • 2019年8月
  • 2019年7月
  • 2019年6月
  • 2019年5月
  • 2019年4月
  • 2019年3月
  • 2019年2月
  • 2019年1月
  • 2018年12月
  • 2018年11月
  • 2018年10月
  • 2018年9月
  • 2018年8月
  • 2018年7月
  • 2018年6月
  • 2018年5月
  • 2018年3月
  • 2018年2月
  • 2017年12月
  • 2017年11月
  • 2017年9月
Input 空格问题
2022-06-22 10:52:44
16 0 0
Sort函数小Tips😁😃❤️😒😭😩😳
2022-06-20 15:09:29
16 0 0
element-ui中的Select选择器中remote-method方法带自定义参数
2022-05-27 16:13:19
109 2 1
CSS之GAP属性
2022-05-25 19:28:05
90 2 2
  • 0
博主

一枚佛系前端开发,会一丢丢摄影,喜欢折腾,爱好美食。分享点前端技巧、笔记以及各种有趣的APP和资源教程♥♥

友链
Lieme
公众号
西豆 崔欣 执行上下文 卖坚果的怪叔叔 集赞助手
Copyright © 2017-2022 卖坚果的怪叔叔

苏ICP备18048410号-2
  • 首页
  • 技术
  • 生活
  • 记录
  • 朋友
  • 常用代码
  • 关于
# WordPress # # CSS #
坚果大叔
198
文章
47
评论
116
喜欢