css_flex盒子

目录

• 容器与项目
• 主轴与交叉轴
• 语法
• 容器的属性
  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
• 项目的属性
  • order
  • flex-grow
  • flex-shrink
  • align-self

容器与项目

• 容器：父元素下的子元素如果要布局成弹性布局，则父元素称之为容器。
• 项目：弹性布局的元素称之为项目，它是容器的子元素。

主轴与交叉轴

• 主轴：项目们排列的方向称之为主轴。若项目们横向排列，主轴就是x轴；若项目们纵向排列，主轴就是y轴。（此处的x轴与y轴和直角坐标系不同，y轴是由上到下排列，在前端的知识点中y轴指向几乎都是竖直向下）
• 交叉轴：与主轴垂直相交的方向称之为交叉轴。
  

语法

元素变为弹性容器后，它的所有子元素变为弹性项目。

display:flex;
display:inline-flex;

元素设置为flex容器后，子元素项目的float、clear、vertical-align失效，子元素允许修改尺寸，容器的对齐方式text-align失效

容器的属性

flex-direction

其决定主轴的方向

• 值：
  • row。默认值。主轴是x轴，主轴起点是左端。
  • row-reverse。主轴是x轴，主轴起点是右端。
  • column。主轴是y轴，主轴起点是顶端。
  • column-reverse。主轴是y轴，主轴起点是底端。

flex-wrap

当一个主轴排列不下所有的项目时，可以换行显示

• 值：
  • nowrap。默认值。空间不够时也不换行，项目会自动缩小。
  • wrap。换行。
  • wrap-reverse。换行并反转。（和wrap完全相反的顺序）

flex-flow

flex-direction与flex-wrap的缩写

• 值：（共有12种搭配）
  • row nowrap(默认值)

justify-content

定义项目在主轴上的对齐方式

• 值：
  • flex-start。在主轴的起点无间隙地挤在一起。
  • flex-end。在主轴的终点无间隙地挤在一起。
  • center。在主轴的中间无缝隙地挤在一起。
  • space-between。各项目间距相等，且占据了主轴起点与终点的位置（第一个项目margin-left和最后一个项目的margin-right为0）。
  • space-around。各项目间距相等。（各项目有相同的margin-left与margin-right）。
  • space-evenly。与space-around相似，不同点在于其首尾两项与边界的距离与项与项之间的距离相等。

align-items

项目在交叉轴上对齐的方式

• 值：
  • flex-start。默认值。在交叉轴起点对齐。
  • flex-end。在交叉轴终点对齐。
  • center。在交叉轴居中对齐。
  • baseline。在交叉轴基线对齐。（与flex-start差不多）
  • stretch。如果项目没有设置尺寸，在交叉轴上占满所有的空间。

项目的属性

order

• 值：无单位整数。
  值越小越靠近主轴的起点。默认值为0。

flex-grow

定义项目的放大比例速度。也同样是定义项目在主轴上的长度（可能是宽也可能是高）的比例。

• 值：无单位整数。默认值为0,不放大。

flex-shrink

定义项目的缩小比例速度。当容器空间不足时项目应该如何缩小。

• 值：无单位整数，默认为0,不缩小。

align-self

定义当前项目在交叉轴上的对齐方式

• 值：
  • flex-start：默认值，在交叉轴起点对齐。
  • flex-end:在交叉轴的终点对齐。
  • center：在交叉轴居中对齐。
  • baseline：在交叉轴基线对齐。
  • stretch：如果项目没有设置尺寸，在交叉轴上占满所有空间。
  • auto：继承父元素的align-items效果。