flex 布局常用属性整合_display flex 换行

语法： display：flex；
1、给父盒子添加属性，对父盒子进行描述，仅子盒子生效；
2、这个时候的盒子就是弹性盒子，有主轴和侧轴（）
3、有自己独立的布局方式

一、使用方法

给父盒子添加：display：flex；（必须写）
对父盒子进行布局描述即可：比如flex-wrap：wrap;，justify-content：space-around;

二、flex 布局常用属性

1.主轴方向： flex-direction 属性

取值（常用）：
row： 从左到右 （默认）【横向】
column： 从上到下 【纵向】

2. 开启换行： flex-wrap 属性

取值（常用）：
wrap ： 换行
nowarp ： 不换行（所有子元素都是在一行，且总宽度小于父元素，大于的话会被强行缩小）

3.主轴对齐方式： justify-content 属性

取值（常用）：
flex-start : 起始位置对齐
flex-end : 结束位置对齐
center : 居中
space-between ：第一个贴左边，最后一个贴右边，其他盒子均分，保证每个盒子之间的空隙是相等的
space-around ： 元素会平均地分布

4.侧轴的对齐方式： align-items 和 align-content 属性

（1）align-items 取值（常用）：
flex-start
flex-end
center
stretch ： 元素的高度会被拉伸到最大（不能给死高度）
【使用场景】：等分布局

（2）align-content 取值（常用）：
flex-start
flex-end
center
space-between
space-around
【使用场景】：固定高，多行；固定高，开启换行

三、align-items 和 align-content区别（面试常问）

align-items：

1、属性作用的基本单位是每一个子项，在所有情况下都有效果（不管是否换行）
2、 子项默认均分区间大小，在均分区间内对其方式默认为 flex-start

align-content：

属性作用的基本单位是子项构成的行，flex容器在高度固定的情况下：
①子项多行时生效。②设置了 flex-wrap:wrap 时生效。

四、效果图

【完整例子】

<div class="all">
  <div class="i1">1</div>
  <div class="i2">2</div>
  <div class="i3">3</div>
  <div class="i4">4</div>
</div>
1
2
3
4
5
6

	/* 不切换主轴-------------------------------------------- */
    .all {
      width: 200px;
      height: 200px;
      border:1px solid salmon;
      display: flex;
      flex-wrap: wrap;
      flex-direction: row;
      justify-content: space-around;
      align-items: center;
    }
    .all>div {
      height: 70px;
      width: 70px;
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

效果：

换行与不换行的比较

space-between 效果

space-around 效果

flex-start 效果

flex-end 效果

补充：flex 布局，给子盒子添加的属性

前提：父盒子要加 display：flex
子盒子添加：
flex ：1 ； 属性值取值为数字，代表盒子宽的占比，分配主轴的空间
order： 999; 设置盒子的排序，值越小，越靠前，默认 0
align-self：center；用于设置在侧轴的位置，但是align-self给子元素设置，比align-items的优先级高。取值与align-items的取值一样。

【示例】

<div class="all">
  <div class="i1">1</div>
  <div class="i2">2</div>
  <div class="i3">3</div>
  <div class="i4">4</div>
</div>
1
2
3
4
5
6

	/* 不切换主轴-------------------------------------------- */
    .all {
      width: 200px;
      height: 200px;
      border:1px solid salmon;
      display: flex;
    }
    .all>div {
      height: 70px;
      width: 70px;
      flex: 1;
    }
    /* 单独设置第四个盒子的占比 */
    .all .i4 {
      background-color: #B1CCFF;
      flex: 2;
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

效果如下：