felx布局学习

发表于

flex一直在用但是感觉理解的不够深，由于被问起，所以准备先集成一点简单的理解争取能给对方讲明白那么一丢丢～

背景

在谈flex前需要了解一下css布局 盒子模型：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model

基本概念

采用flex布局的元素称为flex容器，它的子元素是其成员，称为flex item
容器分为主轴(main axis)和交叉轴(cross axis)
借用阮一峰老师博客的一张图清晰展示了flex容器：
avatar

容器的属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
flex-direction
    设置主轴的方向，项目的排列方向，以主轴平行方向(row/row-reverse),或者以主轴为垂直方向(column/column-reverse)排列
flex-wrap
    项目在一条主轴线上，设置其换行与否，且第二行在前还是后
flex-flow
    flex-direction和flex-flow的j简写
justify-content
    在主轴上的对齐方式
    flex-start（默认值）：左对齐
    flex-end：右对齐
    center： 居中
    space-between：两端对齐，项目之间的间隔都相等。
    space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
align-items 交叉轴上的对齐方式
    flex-start：交叉轴的起点对齐。
    flex-end：交叉轴的终点对齐。
    center：交叉轴的中点对齐。
    baseline: 项目的第一行文字的基线对齐。
    stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
align-content 多轴的对齐方式

flex itme容器项目的属性

1
2
3
4
5
6
order
flex-grow
flex-shrink
flex-basis
flex
align-self