CSS.flex见解

Flex 是 flexible 的缩写，意思为弹性布局，弹性盒。用来为盒模型提供最大的灵活性。
任何一个容器都可以指定为 flex 布局( 包括行内元素 )：

<div> display :flex </div>

设置flex之后，float等样式都会失效。。。。

• 常规布局：

  • 块级元素自上而下排列
  • 元素只有高度，没有宽度时，宽度默认100%
  • 元素只有宽度，没有高度时，高度为 0

• flex 布局

  • 容器内元素默认从左往右排列
  • 元素只有高度，没有宽度时，宽度为 0
  • 元素只有宽度，没有高度时，高度默认100%

成为 flex 容器的元素默认有两条轴：水平主轴（main axis）和垂直交叉轴(cross axis)，单个项目占据的主轴空间称为 main size，交叉轴为 cross size

       Flex属性值

• flex-direction 改变主轴的方向，默认为 row 横向排列。属性包含 row | row-reverse | column | column-reverse
• flex-wrap 控制元素换行。属性包含 nowrap | wrap | wrap-reverse
• align-content 控制多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。属性包含 flex-start | flex-end | center | space-between | space-around | stretch
• justify-content 控制在主轴上的对齐方式。属性包含 flex-start | flex-end | center | space-between | space-around
• align-items 控制交叉轴上如何对齐。包含的属性有 flex-start | flex-end | center | baseline | stretch
• align-self 属性允许单个项目有与其他项目不一样的对齐方式。包含的属性 auto | flex-start | flex-end | center | baseline | stretch
• order 属性控制元素的排列顺序，数值越小，排列越靠前。
• flex-grow 属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
• flex-shrink 属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
• flex-basis 属性定义了项目占据主轴的空间，默认为 auto ，即元素本来大小。
• flex 属性是 flex-grow, flex-shrink 和 flex-basis 的简写，默认值为0 1 auto