flex布局初级[转自阮一峰]
来源:互联网 发布:复杂网络节点中心性 编辑:程序博客网 时间:2024/06/05 02:26
1、两条轴,main-axis和cross-axis,端点分别为main start,main end和cross start,cross end
2、容器的6个属性:
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
flex-direction:
- row(默认):主轴为水平方向,起点在左端
- row-reverse:主轴在水平方向,起点在右端
- column:主轴为垂直方向,起点在上沿
- column-reverse:主轴为垂直方向,起点在下沿
flex-wrap:
- nowrap(默认):不换行
- wrap:换行,第一行在上方
- wrap-reverse:换行,第一行在下方
flex-flow:flex-direction和flex-wrap的简写形式,flex-flow: <flex-direction> || <flex-wrap>;
justify-content:定义项目在主轴上的对其方式
- flex-start(默认):左对齐
- flex-end:右对齐
- center:居中
- space-between:两端对齐,项目之间的间隔相等
- space-around:每个项目两侧的间隔相等。项目与项目间的间隔,是,项目与边框间的间隔的两倍
align-items:定义项目在交叉轴上如何对齐
- flex-start:交叉轴的起点对齐
- flex-end:交叉轴的终点对齐
- center:交叉轴的中点对齐
- baseline:项目的第一行文字的基线对齐
- stretch(默认):如果项目未设置高度或设为auto,则将占满整个容器
align-content:定义了多根轴线的对齐方式。如果只有一根轴线,则该属性不起作用
- flex-start:交叉轴的起点对齐
- flex-end:交叉轴的终点对齐
- center:交叉轴的中点对齐
- space-between:与交叉轴的两端对齐,轴线之间的间隔平均分布
- space-around:每根轴线两侧的间隔相等
- stretch:轴线占满整个交叉轴
3、项目的6个属性:
- order:定义项目的排列顺序。数值越小,排列越靠前,默认为0
- flex-grow:定义项目的放大比例。默认为0
- flex-shrink:定义项目的缩小比例。默认为0
- flex-basis:定义在分配多余空间之前,项目占主轴空间。默认为auto
- flex:flex-grow/shrink/basis的缩写,flex: none | [flex-grow] [flex-shrink]? || [flex-basis]。两个快捷值:auto(1,1,auto),none(0,0,auto)
- align-self:允许单个项目有与其它项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素align-items属性
- baseline
0 0
- flex布局初级[转自阮一峰]
- Flex 布局教程:实例篇(转载自阮一峰博客)
- MapReduce初级案例(转自虾皮博客)
- Flex布局
- flex布局
- Flex 布局
- flex布局
- Flex 布局
- Flex布局
- Flex布局
- Flex布局
- flex布局
- Flex布局
- flex布局
- flex布局
- Flex布局
- flex布局
- flex布局
- nodejs
- vim编辑器
- java类初始化加载
- myeclipse中设置注释(包括作者,修改时间等)
- chartdirector绘制风量计算结果对比图及导出到word中的问题
- flex布局初级[转自阮一峰]
- <s:property>标签的escape属性
- 运用单例模式、建造者模式和策略模式实现异步加载Android联系人资料
- mysql优化要点
- H264编码原理以及I帧B帧P帧
- Cookie技术解析
- 前段WebUploader;JavaEE大文件分片上传接收
- 2.shell编程(2) --- 变量,编译型,解释型
- 小松博客文章上一篇下一篇样式修改