Flex布局学习笔记

2021-10-26 82 阅读1分钟

主题

学习了阮一峰关于flex布局的教程。以下为学习笔记：

flex布局是什么

flex是flexible box的缩写，意为“弹性布局”，用来为盒装模型提供便利性。

// 任何一个容器都可以指定为flex布局。
.box {
    display: flex;
}
// 行内元素也可以使用flex布局
.box {
    display: inline-flex;
}

基本概念

flex container——采用flex布局的元素；
flex item——其所有的子元素自动成为容器成员。

主轴：main axis;
交叉轴：cross-axis。

属性

6个主要属性：

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

flex-direction

.box {
    flex-direction: row || row-reverse || column || column-reverse
}

row: 默认值，主轴为水平方向，起点在左端
row-reverse: 主轴为水平方向，起点在右端
column：主轴在垂直方向，起点在上方
column-reverse: 主轴在垂直方向，起点在下端

flex-wrap