flex布局（笔记）

flex布局

以前的布局：float+position

缺点：兼容性，麻烦

flex box：弹性布局

任何元素都可以指定为弹性布局 display：flex；

webkit内核的浏览器，必须加上-webkit前缀。

设置flex布局后，子元素的float，clear，vertical-align属性会失效。

基本概念：采用flex布局的元素称为flex容器(flex container)，它的所有子元素会自动成为flex项目(flex item)。容器默认存在两条轴，水平主轴（main axis）和垂直交叉轴（cross axis）。

容器的基本属性

• flex-direction:定义元素排列的方向。一共有四个值，默认为row。

  row:从左往右，类似于float：left

  row-reverse：从右向左，类似于float：right

  column：从上往下

  column：从下往上

  ​

• flex-wrap：定义元素的换行。一共有三个值，默认为nowrap（不换行）。

  • nowrap：不换行
  • wrap：换行
  • wrap-reverse：换行（本应在第一行的位置在最后一行）

• flex-flow：flex-direction||flex-wrap;这两种属性的结合。

  • flex-flow：row nowrap

• justify-content：定义元素在主轴上的对齐方式，一共有五个值。

  • flex-start：左对齐
  • flex-end：右对齐
  • center：水平居中
  • space-between：占据整整一行，两端分别没有左和右间距，剩下的间距平均分配。（两端对齐，项目之间的间距都相等）
  • space-around：间距在项目中平均分配。（每个项目两侧的间隔都相等，所以边框处的间距比中间的间距小一半。

• align-item:定义项目在交叉轴上如何对齐。

  • flex-start：上对齐
  • flex-end：下对齐
  • center：垂直居中
  • baseline：项目的第一行文字的基线对齐。
  • stretch：默认值 如果项目未设置高度或设置为auto，将占满整个容器的高度。

• align-content：定义了多根轴线的对齐方式。如果项目只有一根轴线，那么这个属性不起作用。

项目的基本属性

• order: 定义项目的排列顺序，数值越小，排列越靠前。
• flex-grow:定义项目的放大比例，如果所有项目的flex-grow属性为1，则它们将等分所有的剩余空间。
• flex-shrink：定义了项目的缩小比例，如果所有项目的flex-shrink属性为1，则它们将等比缩放。
• align-self：允许单个项目与其他项目的对其方式不一样。