什么是flex布局？其属性有哪些？

目录

一、什么是flex布局？

二、其属性有哪些？

---

一、什么是flex布局？

flex是 flexible box 的缩写，就是弹性布局的意思；

任何一个元素（块元素、行内块元素、行内元素），都可以设置为弹性盒子属性。

语法：块元素： display:flex; 行内元素：display:inline-flex。

注意：webkit 内核的浏览器，须要加上 -webkit 前缀，且设置为flex 布局后，子元素 的 clear（清除浮动）、float（浮动）和vertical-align（垂直对齐方式）属性将失效；

二、其属性有哪些？

•  flex-direction【排列方向】：flex-direction: row | row-reverse | column | column-reverse

• flex-wrap【是否换行】：flex-wrap: nowrap | wrap | wrap-reverse

• flex-flow【上述两个组合】：

  flex-flow: flex-direction, flex-wrap

  flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap

• justify-content【在主轴上的对齐方式（横向）】：

  justify-content: flex-start | flex-end | center | space-between | space-around

• align-items【在交叉轴上如何对齐（纵向）】：

  align-items: flex-start | flex-end | center | baseline | stretch

• flex-grow【放大比例，默认为0，即如果存在剩余空间，也不放大】，flex-grow: 默认为0 

• flex-shrink【缩小比例，默认为1，即如果空间不足，则缩小】，flex-shrink: 默认为1

• flex-basis【在分配多余空间之前，项目占据的主轴空间】，flex-basis: | auto

• flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选

• flex: auto;（1 1 auto）        flex: none; （0 0 auto）