空间布局属性

使用格式进行布局, 会非常容易调整.

整体布局

.container {
  display: flex;
  flex-direction: row;
}

关于排列方式, 包括:

• row: 水平从左往右
• row-reverse: 水平从右往左
• colum: 垂直从上到下
• colum-reverse: 垂直从下到上

空间增长

flex-grow: 1;

设置水平对齐的方式

justify-content: flex-start;

关于排列方式, 包括:

• flex-start: 起点对齐, 即左对齐
• flex-end: 右对齐
• center: 居中对齐
• space-between: 两端对齐
• space-around: 环绕对齐, 左侧右侧的空白均完全相等

内部控件对齐

align-items: flex-start;

• flex-start: 顶端对齐
• flex-end: 底端对齐
• center: 垂直居中对齐
• stretch: 垂直拉伸对齐, 一般可以将height设置为auto
• baseline: 文字底部基线对齐

控件居中方法

.photo {
  display: block;
  widows: 90%;
  margin-left: auto;
  margin-right: auto;
}

更多资料可以查看: Flex 布局语法教程