Day02_flex布局

一、flex布局介绍：

1、又名Flexible 布局，弹性布局；
2、开启了 flex 布局的元素叫 flex container
3、flex container 里面的直接子元素叫做 flex items
4、设置 display 属性为 flex 或者 inline-flex 可以成为 flex container

  1、flex： flex container 以 block-level 形式存在
  2、inline-flex： flex container 以 inline-level

二、flex布局模型：

布局模型.png

三、应用在 flex container 上的 CSS 属性

1、flex-direction

• flex items 默认都是沿着 main axis（主轴）从 main start 开始往 main end 方向排布
• flex-direction 决定了 main axis 的方向，有 4 个取值

row（默认值）
row-reverse
column
column-reverse

flex-direction.png

2、justify-content

      决定了 flex items 在 main axis（主轴）上的对齐方式

• flex-start（默认值）：与 main start 对齐

• lex-end：与 main end 对齐

• center：居中对齐

• space-between：

  • flex items 之间的距离相等
  • 与 main start、main end两端对齐

• space-evenly：

  • flex items 之间的距离相等
  • flex items与main start、main end之间的距离等于 flex items之间的距离

• space-around：

  • flex items 之间的距离相等
  • flex items与main start、main end之间的距离是flex items之间距离的一半

3、align-items

      决定了 flex items 在 cross axis 上的对齐方式

• stretch（默认值）：

  当flex items在cross axis 方向的size为auto时，会自动拉伸至填充 flex container

• flex-start：与 cross start 对齐
• flex-end：与 cross end 对齐
• center：居中对齐
• baseline：与基准线对齐

flex-item.png

4、flex-wrap

       flex-wrap 决定了 flex container 是单行还是多行

• nowrap（默认）：单行
• wrap：多行
• wrap-reverse：多行（对比 wrap，cross start 与 cross end 相反

5、 flex-flow

• flex-flow 是 flex-direction || flex-wrap 的简写
• 比如 flex-flow: column wrap 等价于
  • flex-direction: column
  • flex-wrap: wrap
• 比如 flex-flow: row-reverse 等价于
  • flex-direction: row-reverse
  • flex-wrap: nowrap
• 比如 flex-flow: wrap 等价于
  • flex-direction: row
  • flex-wrap

flex-flow

flex-direction
flex-wrap
justify-content
align-content

◼ 应用在 flex items 上的 CSS 属性
flex
flex-grow
flex-basis
flex-shrink
order
align-self

2、官方文档：

https://www.w3c.org/TR/css-flexbox-1/
https://www.w3c.org/TR/css-align-3/