Flex布局

Flex布局.md

Flex布局

在 CSS 中通过添加 display: flex; 元素设为 Flex 布局。

轴

元素沿着主轴排列，沿着交叉轴对齐。

默认状态下:

• 横轴为主轴（main axis)
  • 左端为主轴起点（main start)
  • 右端为主轴重点（main end)
• 纵轴为交叉轴（cross axis)
  • 上端为交叉轴起点（cross start）
  • 下端为交叉轴终点（cross end）

基本属性:

• flex-direction - 设置主轴和方向，取值为：row、row-reverse、column、column-reverse 等

示例: https://codepen.io/hubenchang0515/pen/PovmMzG

宽度设置

• width: min-content; - 宽度为最长的单词的长度
• width: max-content; - 宽度为全文的长度
• flex-basis: 50px; - 宽度为 50px
• flex-grow: 1; - 增长因子，宽度增长剩余空间的 1/n （n 为所有 item 的 flex-grow 之和）
• flex-shrink: 1; - 收缩因子，宽度溢出容器时缩小溢出宽度的 1/n（n 为所有 item 的 flex-shrink 之和)，如果为 0 则允许溢出

示例: https://codepen.io/hubenchang0515/pen/dyEWxvy

对齐设置

• justify-content - 沿主轴设置元素间隔，取值为：flex-start、flex-end、center、space-between、space-around、space-evenly
• align-items - 沿交叉轴设置对齐方式，取值为：flex-start、flex-end、center、baseline、stretch

示例: https://codepen.io/hubenchang0515/pen/ZENyzBz