首页手记 css3 Flex布局

css3 Flex布局

标签：

CSS3

一、Flex 容器

采用Flex布局的元素，称为Flex容器（flex container）,简称‘容器’。它所有的子元素自动成为容器成员，称为Flex项目（flex item），简称‘项目’。任何一个元素都可以指定为Flex布局。

display:flex|inline-flex 定义弹性伸缩盒容器类型
flex将对象作为块级弹性弹性盒模型。
inline-flex将对象作为内联块级弹性弹性盒模型。

注意，设为Flex布局之后，子元素的float、clear 和 vertical-align 属性将失效。

容器的属性以下6个属性设置在flex 容器上

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

flex-container.png

容器默认存在两根轴： 水平的主轴（main axis） 和 垂直的交叉轴(cross axis)。主轴的开始位置（与边框的交叉点）叫做 main start ，结束位置叫做 main end；交叉轴的开始位置叫做 cross start ，交叉轴的结束位置叫做 cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做 main size，占据的交叉轴空间叫做 cross size。

1. flex-direction 排列盒子的方向

row(默认)：横向从左往右排列（横向）。
row-reverse: 对其方式与row相反。（横向）。
column: 纵向从上往下排列。（纵向）
column-reverse: 对其方式与 column 相反（纵向）。

排列盒子的方向.png

2.flex-wrap 换行方式

flex-wrap: nowrap| wrap| wrap-reverse
控制flex容器是单行显示还是多行显示，同时横轴的方向决定了新行堆叠的方向。

nowrap(默认)： flex容器为单行，不换行
wrap: flex为多行，超出换行
wrap-reverse: 反转wrap 排列。

（1）nowrap(默认)：不换行。

nowrap.png

(2)wrap:换行，第一行在上方

wrap.png

(3)wrap-reverse: 换行，第一行在下方。

wrap-reverse.png

3.flex-flow:

flex-flow: 属性是flex-direction属性和 flex-wrap属性的简写形式，默认值是（row nowrap）

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

justify-content: flex-start| flex-end| center| space-between| space-around.
flex-start（默认值）:左对齐。
flex-end: 右对齐。
center: 在主轴上居中对其。
space-between: 两端对齐，项目之间的间隔都相等。
space-around: 每个项目两侧的间隔都相等。所以，项目之间的间隔比项目与边框之间的间隔要大一倍。

justify-content.png

5.align-items 属性定义项目在交叉轴上如何对齐

align-items: flex-start|flex-end| center| baseline| stretch(默认).
flex-start: 交叉轴的起点对齐。
flex-end: 交叉轴的终点对齐。
center: 交叉轴上居中对齐。
baseline: 项目的第一行文字基线对其。
stretch(默认值): 如果项目未设置宽高或者设为auto,将沿着交叉轴占满整个容器的高度或者宽度。

align-items.png

6.align-content 属性定义了交叉多根（行）轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

align-content： flex-start| flex-end| center| space-between| space-around| stretch(默认值);
flex-start: 与交叉轴的起点对齐。
flex-end: 与交叉轴的终点对其。
center: 交叉轴上居中对齐。
space-between: 与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around: 每根轴线两端的间隔都相等。所以，轴线之间的间隔比轴线与边框之间的间隔大一倍。
stretch(默认值)：轴线占满整个交叉轴。在设置了align-items后无效。

多行下的align-content 会使align-items失效

align-content.png

二、项目属性

以下6个属性将设置在项目上。

order: 项目排序。
flex-grow: 项目拓展比例，或者说项目放大比例。
flex-shrink: 项目缩小比例
flex-basis: 定义拓展剩余空间前，的交叉轴的宽
flex：复合属性。
align-self：自定义项目的align-items

1. order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0，可以为负值。

order.png

2.flex-grow: <number> 定义项目的放大比例，（默认为0）即如果存在剩余空间，也不放大

子元素的尺寸 = 父级盒子剩余空间尺寸*（子元素的box-grow属性值／所有子元素的box-grow属性值的和）

3.flex-shrink 属性定义了项目的缩小比例，（默认值为1），即如果空间不足，该项目将缩小。

元素收缩宽度 = 超出宽度*（元素收缩比／收缩总比）

flex-shrink.png

4.flex-basis 属性定义了在分配多余空间之前，项目占据的主轴空间（main size）,浏览器根据这个属性，计算主轴是否有多余的空间。它的默认值为auto.

值: || auto| content
<length>: 用长度来定义宽度。不允许负值。
<percentage>: 用百分比来定义宽度。不允许负值。
auto: 无特定的宽度值，取决于它的属性值，auto的计算规则是检索一下你是否设置了 width(或者 height值，取决于 flex-direction，就会采用这个值，否则的话，最后使用的值是content)
content: 基于内容自动计算宽度