flex简单用法

版权声明： https://blog.csdn.net/Yugoup/article/details/91378029

flex的容器属性

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

flex元素属性

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

1.弹性盒模型

只要加上display:flex ,就成了弹性盒子，这个元素就成为了弹性容器，具有flex弹性布局的特性。

弹性盒子分主轴和交叉轴，以主轴方向排列

2.主轴

1.横向排列：flex-direction:row 默认（自左向右） | flex-direction:row-reverse（自右向左）

2.纵向排列：flex-direction:column 纵向:（自上而下） | flex-direction:column-reverse （自下而上）

当主轴排列不下时

通过设置flex-wrap: nowrap | wrap | wrap-reverse可使得主轴上的元素不折行、折行、反向折行。

3.一个复合属性

flex-flow = flex-drection + flex-wrap
flex-flow相当于规定了flex布局的“工作流(flow)”
flex-flow: row nowrap;
可以节省一下代码

flex垂直居中和水平居中

使用flex，float属性不会生效

//在父div内的style
	display: flex;
    justify-content: center;	//水平居中
    align-items: center;		//垂直居中

flex更深入应用地址》》