弹性盒子常用属性
来源:互联网 发布:mac开机进度条卡住 编辑:程序博客网 时间:2024/06/05 16:45
弹性盒子常用属性
display设置为flex属性
flex-direction属性:设置子元素的排列方式,同时设置主轴,默认的情况下x轴为主轴
flex-direction: row | column | row-reverse | column-reverse
- row:设置子元素为x轴正向排列(默认)此时主轴为x轴,侧轴为y轴
- row-reverse:设置子元素为x轴从右往左排列 此时主轴为x轴,侧轴为y轴
- column:设置子元素为y 轴正向排列 ,当设置了这个属性后,主轴变成y轴,侧轴变成x轴
- column-reverse:设置子元素为y 轴反向排列 ,当设置了这个属性后,主轴变成y轴,侧轴变成x轴
- 注意:主轴的方向并不是不变的,它是相对于这个属性而变化
justify-content属性:设置主轴的排列方式,此属性作用于父元素上
justify-content: center | flex-start | flex-end | space-around | between-around
- space-around:子元素平均分布于父元素的主轴上
- between-around:首位两个子元素贴着父元素的边,其余的子元素平均分布
align-items属性:设置侧轴的排列方式,此属性作用于父元素上
align-items: center | flex-start | flex-end | space-around | between-around
- space-around:子元素平均分布于父元素的主轴上
- between-around:首位两个子元素贴着父元素的边,其余的子元素平均分布
align-self属性:弹性子元素的属性,用于设置弹性元素自身在侧轴(纵轴)方向上的对齐方式。
align-content: center | flex-start | flex-end | space-around | between-around
- space-around:子元素平均分布于父元素的主轴上
- between-around:首位两个子元素贴着父元素的边,其余的子元素平均分布
align-self属性:弹性子元素的属性,用于设置弹性元素自身在侧轴(纵轴)方向上的对齐方式。
align-content: center | flex-start | flex-end | space-around | between-around
- space-around:子元素平均分布于父元素的主轴上
- between-around:首位两个子元素贴着父元素的边,其余的子元素平均分布
flex-wrap属性:当多个子元素的宽超过父元素时,设置是否换行
flex-wrap: wrap | no-wrap | wrap-reverse(反转)
可参考网址: http://www.runoob.com/css3/css3-flexbox.html
1 0
- 弹性盒子常用属性
- flex弹性盒子常用属性
- 弹性盒子属性
- flext弹性盒子属性
- 弹性盒子模型属性之flex-grow
- 弹性盒子模型属性之flex-shrink
- 弹性布局常用属性
- 弹性盒子
- /*弹性盒子*/
- 弹性盒子
- 弹性盒子
- 滑动盒子/弹性盒子
- CSS box-flex属性,然后弹性盒子模型简介
- CSS box-flex属性,然后弹性盒子模型简介
- CSS box-flex属性,然后弹性盒子模型简介
- CSS box-flex属性,然后弹性盒子模型简介
- CSS box-flex属性,然后弹性盒子模型简介
- CSS box-flex属性,然后弹性盒子模型简介
- Android 自定义进度条
- linux网络编程之TCP/IP基础(五):分析一帧基于UDP的TFTP协议帧
- 模式九:模板方法模式(Template Pattern)——封装算法块
- Window进程管理
- MySQL InnoDB四个事务级别 与 脏读、不重复读、幻读
- 弹性盒子常用属性
- java中类与类之间的关系
- 【软件开发】Visual Studio“15”预览版 5
- 均值,方差,协方差,协方差矩阵,特征值,特征向量
- Android 开源项目分类汇总
- Android逆向之旅—动态方式破解apk前奏篇(Eclipse动态调试smail源码)
- CSS代码重构与优化之路【转载】
- Swift 学习笔记 Core Data (一)
- MicroPython - 问题整理