flex布局

flex布局的概念

• Flex 布局，可以简便、完整、响应式地实现各种页面布局
• 任何一个容器都可以指定为 Flex 布局，行内元素也可以使用 Flex 布局。

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

1. 采用 Flex 布局的元素，称为 Flex 容器，简称"容器"
2. 它的所有子元素自动成为容器成员，称为 Flex 项目,简称"项目"。

flex容器属性

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

• flex-direction

概念: 属性决定主轴的方向
flex-direction: row | column;
// row(默认值) 横向显示
// column 纵向显示

• flex-wrap

概念: 是否换行
flex-wrap: nowrap | wrap;
// nowwrap(默认值) 不换行
// wrap 换行

• flex-flow

概念: 属性是flex-direction属性和flex-wrap属性的简写形式
flex-flow: row nowrap;
// 第一个参数是主轴的方向
// 第二个参数是是否换行

• justify-content

概念: 项目在主轴上的对齐方式 (居中就相当于text-align:center)
justify-content: flex-start | flex-end | center | space-between | space-around;
// flex-start(默认值) 左对齐
// flex-end: 右对齐
// center: 居中
// space-between: 左右两端对齐,中间有间隔
// space-around: 左右两端有间隔,中间也有间隔

• align-items

概念: 项目在交叉轴上如何对齐,单行（相当于line-height）
align-items: flex-start | flex-end | center | baseline | stretch;
// flex-start: 最上面
// flex-end: 最下面
// flex-center: 居中
// flex-baseline: 跟着项目第一行文字的底部对齐
// stretch(默认值): 拉伸,撑满

• align-content

概念: 多行的对齐方式,如果项目只有一行，该属性不起作用
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
// flex-start: 最上面
// flex-end: 最下面
// flex-center: 居中
// space-between: 上下两端对齐,中间有间隔
// space-around: 上下两端有间隔,中间也有间隔

flex项目属性

order
flex-grow
flex-shrink
flex-basis
flex
align-self

• order

概念: 属性定义项目的排列顺序,数值越小，排列越靠前，默认为0
// order: -1 后面的数值要比-1大,-1就会在最前面

• flex-shrink

概念: 缩小比例
// flex-shrink:0 就是不缩小的意思

• flex-basis

概念: 放大比例
// flex-basis:0 就是不放到的意思

• flex

概念: flex属性是flex-grow, flex-shrink 和 flex-basis的简写
// 一般会用flex:1