css3 flex
来源:互联网 发布:网络优化弱覆盖 编辑:程序博客网 时间:2024/05/18 23:27
以前用的是box,最新的是flex
display:flex。
display:flex 应用于子集
flex:num 设置元素分配的比例
flex-grow:num 分配剩余空间此元素分配的比例
flex-direction:主轴显示方向 row 默认从左到右 row-reverse 从右到左 column 从向向下 column-reverse 从下向上
flex-wrap:设置显示多行或单行 nowrap 单行 wrap 一行不够多行 wrap-reverse 反转wrap
flex-flow:direction wrap 复合属性,值是方向值和 wrap值。 两个属性决定了新行堆叠的方向
align-content:当伸缩容器的侧轴还有多余空间时,本属性可以用来调准 flex-start 轴顶对齐 flex-end 轴底对齐 center 居中对齐 stretch高度占满轴
align-items:定义纵轴方向对齐 flex-start 顶对齐 flex-end底对齐 center 居中对齐 baseline 第一行文字的基线对齐 stretch默认纵向占满
justify-content:项目在主轴上的对齐 flex-start 开始对齐 flex-end 结束对齐 center 居中对齐 space-between 平均对齐 左右两端不留空 space-around平均对齐 左右两端留空
align-self:它用于子元素的,用来设置本身的纵轴对齐参数和align-itmes一样。
order:num 用于子元素,设置本身显示时的顺序可以为负,小在前
纵轴:默认flex是行向显示,那么纵轴就是竖向。竖着显示纵轴就是行向。
总结:
常用的几个属性:
flex 设置分配比例
flex-grow:设置剩余空间分配比例
flex-direction:设置排列模式,行向和竖向
flex-wrap 设置溢出多行和溢出行方向
flex-flow 是direction wrap的复合
align-items:纵轴对齐样式,
justify-content: 内容在主轴上的对齐
主轴就是内容行向或纵向。
纵轴就是方向的侧轴。
- css3 flex
- css3 flex
- 【css3】flex
- css3--flex
- css3-box-flex布局
- CSS3属性box-flex
- css3--display:flex;
- CSS3 弹性布局Flex
- 浅撸 css3 flex 布局
- css3中的flex布局
- CSS3 box-flex 属性
- CSS3 Flex计算逻辑
- CSS3 box-flex 属性
- css3-flex-ONE
- css3-flex-two
- Css3的Flex属性
- css3 flex兼容性
- css3 flex 布局理解
- iOS开发博客列表
- javascript array对象
- 深入分析 Java 中的中文编码问题
- Linux多线程与同步
- 移动端专用数据库Realm介绍
- css3 flex
- windows下xml的读写
- C++已经失势,起码在互联网是这样
- ListView 仿微信聊天界面
- call和apply
- Cocos2dx中零散知识点
- hadoop2.X集群上Hbase的安装
- 设计模式之策略模式
- LeetCode 57 - Insert Interval