#### 1.什么是flex布局 工作中比较常用，display属性的一种，添加了这个属性，可以比较容易的实现垂直水平居中等一些样式 #### 2.添加了display:flex，父元素有哪些属性 ~~~ flex-direction flex-wrap justify-content align-items flex-flow ~~~ * flex-direction: 决定主轴的方向，默认是横向, row-reverse是反方向排序 ~~~ flex-direction: row | column | row-reverse | column-reverse ~~~ * flex-wrap: 超出时换行，默认不换行，会导致挤压 ~~~ flex-wrap: wrap | no-wrap ~~~ * flex-flow: flex-direction flex-wrap 的简写 * justify-content：主轴的排列方式 ~~~ justify-content: flex-start|flex-end|center|space-between|space-around|space-evenly; space-between: 两端对齐，子元素之间间隔相对(0 1 1 1 0) space-around: 子元素之间间隔相等，比子元素到父元素的间隔大一倍(0.5 1 1 1 0.5) space-evenly: 父元素与子元素之间和子元素之间间隔相等 (1 1 1 1 1) ~~~ * align-items: 相对主轴的排列方式，默认是纵向，当主轴在纵向时，则变为横向 ~~~ align-items: flex-start | flex-end | center | stretch | baseline stretch--高度拉伸为100% baseline--沿基线对齐（子元素第一行文字底部对齐） ~~~ #### 3.子元素的属性 ~~~ order flex-grow flex-shrink flex-basis flex align-self ~~~ * order: 定义子元素的排列顺序，数值越小排列越靠前，默认为0 ~~~ .child1 {    order: 1; } ~~~ * flex-grow: * 定义子元素的放大比例，默认为0不放大，放大的方向根据主轴的方向来定， * 如果所有项目数值都为1，就是所有项目等分剩余空间，如果有一个项目为2，其余为1时，前者占据的是后者的两倍 * 如果只有一个为1，就是该元素占据剩余所有的空间 ~~~ .child1 {    flex-grow: 1; } ~~~ * flex-shrink: * 相对于flex-grow，当父元素空间不足时，定义子元素之前的相对缩小比例 * flex-shrink需要每个元素都定义 * flex: flex-flow flex-shrink flex-basis 的缩写 ~~~ .child { flex: 1; // 当flex为1的时候，默认占据剩余空间, 有可能是放大，也有可能是缩小 } ~~~ * flex-basis: 用于设置子元素伸缩的基准值，或者比例 ~~~ flex-basis: 80% ~~~ * align-self: 允许单个项目与其他的项目不一样的对齐方式