flex 弹性盒模型

弹性盒模型

一、对容器的控制

display:flex;
display:inline-flex;

1. 改变元素的方向

• 默认水平排列
• flex-direction: row/column/row-reverse（反转）;

2. 控制元素溢出

• flex-wrap:wrap; 控制元素换行
• flex-wrap：wrap-reverse；反折
• 统一设置：flex-flow:row wrap;

3. 主轴的对齐

• justify-content：flex-start/ flex-end/ center/ space-between（两端对齐，轴线之间平均分布）/ space-around（轴线两端距离相等，轴线之间间距比边框间隔大）/ space-evenly；

4. 交叉轴对齐

• align-items：flex-start/stretch（拉伸）
  • min-height等的优先级高于拉伸
• align-content：flex-start··· （多根轴线的对齐方式）

5. 对单个元素交叉轴的控制

article :first-child{
    align-self:stretch;
    height: auto;
}
article:nth-child(2){
    align-self:center;
}

二、对单个项目的控制

• flex-grow 放大比例
• flex-shrink 缩小比例

article div:nth-child(1){
    flex-grow:1(各部分占比);
}
article div:nth-child(2){
    flex-shrink:1(各部分缩小占比);
}

2. order 项目的排列顺序

• 数值越小，排列越靠前，默认为0.
• flex-basic 基准尺寸，占据多余空间之前的主空间

3. 尺寸
   min，max > 主轴的基准尺寸flex-basic > width,height

• flex：1 2 100px （第一个放大，第二个缩小，第三个基准尺寸）
  • flex：auto（1，1，auto）；
  • flex：none（0，0，auto）；

点击效果

• cursor:pointer;

将元素置于最右端：

• 设置margin-right：auto；