## 3，flexbox布局  > flexbox的缺点就是IE10开始支持，但是IE10的是-ms形式的。 > 如果中间部分被内容高度撑开，需要左右栏也撑开----- flex布局和table布局 ## flex知识点 #### 容器属性（6） * `flex-direction` 决定主轴方向（容器排列方向） ~~~ flex-direction: row | row-reverse | column | column-reverse; ~~~ * `flex-wrap` 如果一条轴线排不下，定义换行规则 ~~~ flex-wrap: nowrap | wrap | wrap-reverse; ~~~ * `flex-flow` flex-direction和flex-wrap的简写形式 ~~~ flex-flow: <flex-direction> || <flex-wrap>; ~~~ * `justify-content` 定义容器在主轴上的对齐方式 ~~~ justify-content: flex-start | flex-end | center | space-between | space-around; ~~~ * `align-items` 定义容器在交叉轴上的对齐方式 ~~~ align-items: flex-start | flex-end | center | baseline | stretch; ~~~ * `align-content` 定义多根轴线的对齐方式，如果容器只有一根轴线，该属性不起作用 ~~~ align-content: flex-start | flex-end | center | space-between | space-around | stretch; ~~~ #### 项目属性（6） * `order` 定义项目的排列顺序，数值越小，排列越靠前，默认为0 * `flex-grow` 定义项目的放大比例，默认为0（即如果存在剩余空间，也不放大） * `flex-shrink` 定义项目的缩小比例，默认为1（即如果空间不足，该项目将缩小） * `flex-basis` 定义了在分配多余空间之前，项目占据的主轴空间。默认值为auto（项目本来大小） ### **flex: 0 1 auto; 是什么意思？** 元素会根据自身宽高设置尺寸。它会缩短自身以适应`flex`容器，但不会伸长并吸收`flex`容器中的额外自由空间来适应`flex`容器 。水平的主轴（`main axis`）和垂直的交叉轴 * `flex` 是flex-grow、flex-shrink和flex-basis的简写，默认值为 0 1 auto 放大比例、缩小比例、分配多余空间之前占据的主轴空间 ~~~ flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] 该属性有两个快捷值: auto(1 1 auto) 和 none(0 0 auto) 建议优先使用这个属性，而不是单独写三个分离的属性 因为浏览器会推算相关值 ~~~ * `align-self` 允许单个项目有与其他项目不一样的对齐方式，可覆盖`align-items`属性，默认值为`auto`（表示继承父元素`align-items`属性，如果没有父元素，等同于`stretch`） ~~~ align-self: auto | flex-start | flex-end | center | baseline | stretch; ~~~ ```javascript // flex-direction: 属性决定主轴的方向； flex-direction:row | row-reverse | column | column-reverse; // flex-wrap:决定是否换行，默认都是排在一行 // no-wrap;(默认)不换行; wrap 换行，第一行在上方; wrap-reverse 换行；第二行在上方 flex-wrap: nowrap | wrap | wrap-reverse; // flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认 row nowrap。 flex-flow:<flex-direction> || <flex-wrap>; // justify-content:定义在item在主轴上的对齐方式 // flex-start 从左到右; flex-end 从右到左; center 居中 // space-between 两端对齐; space-around每个item两侧中间相等 justify-content:flex-start | flex-end | center | space-between |space-around; // align-items 在纵轴上的对齐方式 align-items:flex-start | flex-end | center |baseline | stretch; // align-content 定义了多跟轴线的对齐方式；如果该项目只有一根轴线，该属性不起作用； align-content:flex-start | flex-end | center | spance-between | space-around |stretch; ```