CSS Flexbox 布局
来源:互联网 发布:linux oracle 监听 编辑:程序博客网 时间:2024/05/29 17:50
参考网页: http://blog.csdn.net/qq_23191031/article/details/53084017
一、概念
Flexbox是Flexible Box的缩写,意为“弹性布局”,它为盒状模型提供了很大的灵活性,让任何一个容器都可以指定为Flex布局。
- 采用Flexbox的元素,称为Flex容器(flex container)。它的所有子元素(flex item)自动成为容器成员。
- Flexbox有两个方向的布局:主轴(main axis)和副轴(cross axis),副轴也成为交叉轴。
- 主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end。
- 交叉轴的开始位置叫做cross start ,结束位置叫做 cross end。
- 单个项目占据的主轴空间叫做 main size,占据的交叉轴空间叫做 cross size。
二、Flexbox的属性
Flexbox的属性可以分为 flex container属性 和 flex item 属性 两类,他们分别对应父容器和子元素。
(1)、flex container属性—父容器
1. flex-direction:决定主轴方向
.box { flex-direction: row | row-reverse | column | column-reverse;}
* column: 主轴为垂直方向,起点在上沿。
* column-reverse:主轴为垂直方向,起点在下沿。
* row(默认值):主轴为水平方向,起点在左端。
* row-reverse:主轴为水平方向,起点在右端。
2. Flex-wrap:排列
nowrap (默认值):不换行
wrap:换行,第一行在上方。
wrap-reverse:换行,第一行在下方。
3. Flex-flow
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为 row || nowrap(“||”代表flex-direction和flex-wrap必须至少有一个,二者之间使用空格隔开,相应的属性请看上面)
.box { flex-flow: <flex-direction> || <flex-wrap>;}
4. justify-content: 定义项目在主轴上的对齐方式
.box { justify-content: flex-start | flex-end | center | space-between | space-around;}
下面假设主轴是从左到右
* flex-start(默认值):左对齐
* flex-end:右对齐
* center:居中
* space-between:两端对齐,项目之间的间隔相等
* space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
5. align-content: 定义多跟轴线的对齐方式
.box { align-content: flex-start | flex-end | center | space-between | space-around | stretch;}
- flex-start:与交叉轴的起点对齐。
- flex-end:与交叉轴的终点对齐。
- center:与交叉轴的中点对齐。
- space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
- space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
- stretch(默认值):轴线占满整个交叉轴。
6. align-items: 定义项目在交叉轴如何对齐
.box { align-items: flex-start | flex-end | center | baseline | stretch;}
下面假设交叉轴从上到下:
- flex-start:交叉轴的起点对齐。
- flex-end:交叉轴的终点对齐。
- center:交叉轴的中点对齐。
- baseline: 项目的第一行文字的基线对齐。
- stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
(2)、flex item—子元素
1. order: 控制排列的顺序
默认情况下子元素的排列方式按照文档流的顺序依次排序,而 order 属性可以控制排列的顺序,负值在前,正值在后(和一维坐标系是相似的),按照从小到大的顺序依次排列。
2. flex-grow: 定义项目的放大比例
flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。占据 number / number总数 也就是布局的几分之几。
.item { flex-grow: <number>; /* default 0 */}
如果所有项目的 flex-grow 属性都为1,则它们将等分剩余空间(如果有的话)既number / number总数 = 1 / (1+1+1+~~+1) = 1。如果一个项目的 flex-grow 属性为2(2/n),其他项目都为1,则前者占据的剩余空间将比其他项多一倍(其他的是 1/n)。
3. flex-shrink :定义了项目的缩小比例
flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
.item { flex-shrink: <number>; /* default 1 */}
如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。负值对该属性无效。
4. flex-basis: 子元素占据的 main size 主轴空间
flex-basis 属性定义了在分配多余空间之前,子元素占据的 main size 主轴空间,浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为 auto ,即子元素的本来大小。
.item { flex-basis: <length> | auto; /* default auto */}
它可以设为跟width或height属性一样的值(比如350px),则项目将占据固定空间。
5. flex
flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。
.item { flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]}
该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto)。
建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值。
6. align-self: 允许单个项目有与其他项目不一样的对齐方式
align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。
.item { align-self: auto | flex-start | flex-end | center | baseline | stretch;}
该属性可能取6个值,除了auto,其他都与 align-items属性完全一致。
- CSS之Flexbox布局
- CSS Flexbox布局
- CSS Flexbox 布局
- Flexbox制作CSS布局易如反掌
- CSS之Flexbox制作CSS布局易如反掌
- 使用css中的flexbox属性布局
- CSS弹性盒子Flexbox布局详解
- CSS弹性盒子Flexbox布局详解
- CSS弹性盒子Flexbox布局详解
- CSS布局 | Flexbox的理解与使用
- Flexbox布局
- flexbox布局
- flexbox布局
- FlexBox布局
- FlexBox布局
- flexbox布局
- flexbox 布局
- flexbox布局
- Android自定义view画圆
- 设计模式-行为-观察者
- 算法设计与分析笔记之(1):算法概述
- hdu-45221-小明系列问题——小明序列-(线段树)
- [bzoj2097][Usaco2010 Dec]Exercise 奶牛健美操
- CSS Flexbox 布局
- 背包九讲——多重背包
- HDU-1003 Max Sum(经典DP)
- Linux/Ubuntu下UGO及ACL权限管理
- 数据结构实验之链表六:有序链表的建立
- 设计模式-行为-状态
- 大学生职业规划书
- BFPRT算法
- 聪聪和可可(记忆化dp+数学期望)