flex伸缩布局

伸缩布局（CSS3新布局flex）

.box {
    display: flex;/*使box盒子为伸缩布局*/
}

      伸缩布局使得块级元素的布局排列变得十分灵活，适应性非常强，它对响应式开发起到很大作用。

      采用伸缩布局的元素，称为伸缩容器，它的所有子元素自动成为容器成员，称为Flex项目。

       伸缩容器中有两根轴，主轴（水平方向）和侧轴（垂直方向）。伸缩项目中默认是以主轴方向排列。

---

下面介绍伸缩布局的相关属性：(以下面为例)

<!-- 对box盒子设置伸缩布局，宽度为1000px，高度省略，居中显示 -->
<div class="box">
    <!-- 对伸缩容器中的盒子，宽高均为200px，margin5px -->
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

.box {
    width: 1000px;
    border: 1px solid #000;
    margin: 5px auto;
}
.box>div {
    width: 200px;
    height: 200px;
    background-color: pink;
    margin: 5px;
}

1. flex-direction：设置伸缩容器中成员的排列方式

flex-direction: row;/* 默认值--以主轴方向排列  水平方向排列 */

flex-direction: column;/* 以侧轴方向排列 垂直方向排列*/

flex-direction: row-reverse;/* 以主轴反方向排列 水平反方向排列*/

flex-direction: column-reverse;/* 以侧轴反方向排列 垂直反方向排列*/

---

2. justify-content：用来指定主轴的对齐方式

justify-content：flex-start; /* 容器成员水平方向左对齐 */

justify-content：flex-end; /* 容器成员水平方向右对齐 */

 justify-content：center; /* 容器成员水平方向居中 */

扫描二维码关注公众号，回复： 156671 查看本文章

justify-content：space-around; /* 容器成员水平方向自动平分间距*/

justify-content： space-between; /* 容器成员水平方向自动平分（两端对其）*/

---

3. align-items：用来指定侧轴的对齐方式 ————————–

   align-items: flex-start;  /* 容器成员垂直方向上对齐 */

  align-items: flex-end;/* 容器成员垂直方向下对齐 */

 align-items: center; /* 容器成员垂直方居中对齐 */

/*
    注意： 
    使用该属性，需要配合高度设置为auto；
    才会有拉伸效果
*/
 align-items: stretch; 

---

4. align-content：用来控制换行堆叠的元素

1. flex-start 起始点对齐

2. flex-end 终止点对齐

3. center 居中对齐

4. space-around 各行平均分布

5. space-between 两端对齐

6. stretch 拉伸

---

5. align-self：（用于处于伸缩布局的子元素，覆盖伸缩盒子的align-items属性）

使每一个成员的侧轴对齐方式都可以不一样
取值：

1. flex-start：控制成员的侧轴对齐方式为顶部对齐

2. flex-end：控制成员的侧轴对齐方式为底部对齐

3. center： 控制成员的侧轴对齐方式为居中对齐

4. stretch： 控制成员的侧轴对齐方式为拉伸，且高度要设为auto

如图，可以得到对应取值的效果：

6. flex伸缩比例

flex: x(x 为number)

flex: 2;

       当伸缩容器中的成员处于设置了伸缩比例，那么会根据父盒子的宽度来设置设置陈冠的宽高。

       然而，当其中某些容器成员没有设置伸缩比例时，会按原宽度显示，父盒子剩余长再对有伸缩比例的成员安排比例。

1.容器成员都设置了伸缩比例的情况

1. 某些成员没有设置伸缩比例的情况

---

7. flex-wrap： 控制伸缩盒子里面的元素是否换行

1. nowrap————不换行（默认值）
   不换行情况下，当成员的总宽度超出容器的宽度时，成员的宽度会发生改变

1. wrap——————换行
   换行情况下，成员的总宽度超出容器的宽度时，会自动换行，不会影响成员的宽度

8. order： 用来控制伸缩布局盒子的子元素的顺序

order: number;（不能为负数）
1. number为非负整数 默认为0
2. number越大，越后面