CSS中flex基本属性

1. 伸缩容器 display

• 语法

display: flex | inline-flex
flex: 块伸缩容器
inline-flex:内联伸缩容器

注意：float,clear,vertical-align在伸缩项目上没有效果

2. 伸缩流方向 flex-direction

主要用来定义主轴，从而定义了伸缩项目在容器中的伸缩方向

• 语法

flex-direction: row | row-reverse | column | column-reverse

• 参数功能

  • row：ltr排版下从左向右排列，rtl排版下从右向左

  • row-reverse：与row排列相反

  • column：类似row，方向是从上到下

  • column-reverse：类似于row-reverse，方向是从下到上

3. 伸缩换行flex-wrap

主要用来定义伸缩容器里是单行显示还是多行显示，侧轴的方向决定了新行堆放的方向

• 语法

flex-wrap: nowrap | wrap | wrap-reverse

• 参数功能
  • nowrap：伸缩容器单行显示，ltr从左到右，rtl从右到左
  • wrap：伸缩容器多行显示，ltr从左到右，rtl从右到左
  • wrap-reverse：伸缩容器多行显示，ltr从右到左，rtl从左到右（与wrap相反）

4. 伸缩流方向与换行flex-flow

这是flex-direction和flex-wrap属性的简写版,同时定义主轴和侧轴

flex-flow: <'flex-direction'> | <'flex-wrap'>

• 参数功能
  • flex-direction：主轴
  • flex-wrap：侧轴

注意：flex-flow与writing-mode有直接联系,当使用writing-mode: vertical-rl时转向垂直布局，flex-flow:row将垂直排列伸缩项目，column将水平排列项目

5. 主轴对其justify-content

主要用来设置伸缩项目沿主轴线的对齐方式

• 语法

justify-content: flex-start | flex-end | center | space-between | space-around

• 参数功能
  • flex-start：伸缩项目向一行的起始位置靠齐
  • flex-end：伸缩项目向一行的结束位置靠齐
  • center：伸缩项目向一行中间位置靠齐
  • space-between：伸缩项目会平均地分布在行里，第一个项目在开始位置，最后一个项目在终点位置
  • space-around：伸缩项目会平均分布在行里，两端保留一半的空间
    
    justify-content

6. 侧轴对齐align-items和align-self

align-items控制伸缩项目在侧轴的对齐方式，align-self控制伸缩项目自身在侧轴的对齐方式

align-items

• 语法

align-items: flex-start | flex-end | center | baseline | stretch

• 参数功能：
  • flex-start：伸缩项目靠侧轴起始边
  • flex-end：伸缩项目在侧轴终点边的外边距靠住该行在侧轴终点边
  • center：伸缩项目的外边距盒在该行的侧轴上居中放置
  • baseline：伸缩项目根据伸缩项目的基线对齐
  • stretch：默认值，伸缩项目拉伸填充整个伸缩容器
    
    align-items

align-self

align-self属性主要用来设置单独伸缩项目在侧轴的对齐方式。可以覆盖该伸缩项目的伸缩容器的align-items属性。

• 语法

align-self: flex-start | flex-end | center | baseline | stretch

如果伸缩项目的任一个侧轴上的外边距为auto，则align-self没有效果

align-self

7. 堆栈伸缩行align-content

align-content属性会更改flex-wrap的行为，它和align-items相似。主要来调准伸缩行在伸缩容器中的对齐方式，与调准伸缩项目在主轴上对齐方式的justify-content类似。

• 语法

align-content: flex-start | flex-end | center | space-between | space-around | stretch

• 参数功能
  • flex-start：各行向伸缩容器起点位置堆叠
  • flex-end:各行向伸缩容器结束位置堆叠
  • center：各行向伸缩容器的中间位置堆叠
  • space-between：各行在伸缩容器中平均分布
  • space-around：各行在在伸缩容器中平均分布，两边处各有一般的空间
  • stretch：默认值，各行将会伸展以占用额外的空间