css-弹性布局

一、什么是Flex

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性

二、Flex组成

设置方式： 給父元素设置dispaly:flex,子元素可以自动挤压和拉伸
组成部分：
1.弹性容器
2.弹性盒子
3.主轴：默认水平方向
4.侧轴/交叉轴：垂直方向
没有设置布局方式默认

    <style>
    /*弹性容器*/
        .all {
            display: flex;
            height: 300px;
            border: 1px solid black;
        }
            /*弹性盒子 默认沿着主轴方向排列*/
        .all div {
            width: 200px;
            height: 100px;
            background-color: pink;
        }
    </style>
    <div class="all">
        <div class="id1">
            1
        </div>
        <div class="id2">
            2
        </div>
        <div class="id3">
            3
        </div>
    </div>

在父类设置display:flex

主轴对齐方式(justify-content)

flex-start（默认值）：弹性盒子从起点依次排列
flex-end：弹性盒子从终点依次排列
center： 弹性盒子沿主轴居中排列
space-between：弹性盒子沿主轴均匀排列，空白间距均分布在弹性盒子之间。
space-around：弹性盒子沿主轴均匀排列，空白间距均分布在弹性盒子两侧。
space-evenly：弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等。

2.1center

        .all {
            display: flex;
            height: 300px;
            border: 1px solid black;
            justify-content: center; 
        }

        .all div {
            width: 200px;
            height: 100px;
            background-color: pink;
        }

2.2 space-between

        .all {
            display: flex;
            height: 300px;
            border: 1px solid black;
            
            /*父元素剩余尺寸分配成间距*/
            /*弹性盒子之间的间距相等*/
            /* justify-content: space-between; */
        }

        .all div {
            width: 200px;
            height: 100px;
            background-color: pink;
        }

2.3 space-around

        .all {
            display: flex;
            height: 300px;
            border: 1px solid black;
            
            /*间距出现在盒子两侧*/
            /*视觉效果：弹性盒子之间的间距是两侧 间距的2倍*/
            justify-content: space-around;
        }

        .all div {
            width: 200px;
            height: 100px;
            background-color: pink;
        }

2.4 space-around

        .all {
            display: flex;
            height: 300px;
            border: 1px solid black;
            /*均匀分配*/
            justify-content: space-evenly; 
        }

        .all div {
            width: 200px;
            height: 100px;
            background-color: pink;
        }

三、弹性盒子在侧轴对齐方式（align-items）

align-items 当前弹性容器内所有弹性盒子的侧轴对齐方式（給弹性容器设置）
1.flex-start 默认值, 起点开始依次排列
2.flex-end 终点开始依次排列
3.center 沿侧轴居中排列
4.stretch 默认值, 弹性盒子沿着主轴线被拉伸至铺满容器
align-self 单独控制某个弹性盒子的侧轴对齐方式（給弹性盒子设置）

3.1 stretch

     .all {
            display: flex;
            /*弹性盒子在侧轴方向内有尺寸才会拉伸*/
            align-items: stretch;
            height: 300px;
            border: 1px solid black;
        }

        .all div {
            width: 200px;
           /* height: 100px; */
            background-color: pink;
        }

3.2 flex-start

        .all {
            display: flex;
            align-items: flex-start;
            height: 300px;
            border: 1px solid black;
        }

        .all div {
            width: 200px;
            height: 100px;
            background-color: pink;
        }

3.3 flex-end

        .all {
            display: flex;
            align-items: flex-end;
            height: 300px;
            border: 1px solid black;
        }

        .all div {
            width: 200px;
            height: 100px;
            background-color: pink;
        }

3.3 center

        .all {
            display: flex;
            align-items: center;
            height: 300px;
            border: 1px solid black;
        }

        .all div {
            width: 200px;
            height: 100px;
            background-color: pink;
        }

3.3 align-self

  .all {
            display: flex;
            align-items: flex-end;
            height: 300px;
            border: 1px solid black;
        }
        /* 第二个div侧轴剧中对齐 */
        .all div:nth-child(2){
            align-self: center;

        }

        .all div {
            width: 200px;
            height: 100px;
            background-color: pink;
        }

四、修改主轴方向（flex-direction）

row（默认值）：主轴为水平方向，起点在左端（项目从左往右排列）。
row-reverse：主轴为水平方向，起点在右端（项目从右往左排列）。
column：主轴为垂直方向，起点在上沿（项目从上往下排列）。
column-reverse：主轴为垂直方向，起点在下沿（项目从下往上排列）

五、弹性盒子的伸缩比

作用：控制弹性盒子主轴方向的尺寸
属性名：flex
属性值：整数数字，表示占父级剩余尺寸的分数

        /* 默认情况下，主轴的尺寸靠内容撑开的，侧轴默认拉伸 */
        .all {
            display: flex;
            height: 300px;
            border: 1px solid black;
        }
        .all div:nth-child(1){
            width: 200px;
        }
        /* 占父级剩余尺寸的1份 */
        .all div:nth-child(2){
            flex:1;
            background-color: yellow;
        }
        /* 占父级剩余尺寸的2份 */
        .all div:nth-child(3){
            flex:2;
            background-color: red;
        }
        .all div {
            height: 100px;
            background-color: pink;
        }

1:2的比例

六、弹性盒子换行

弹性盒子可以自动挤压或拉伸，默认情况下，所有弹性盒子在一行显示。
属性名： flex-wrap
属性值： wrap 换行 nowarp 不换行（默认）

nowarp 不换行（默认）

wrap 换行

<style>
      .all {
          display: flex;
          height: 300px;
          border: 1px solid black;
          flex-wrap: wrap;
      }

      .all div {
          width: 200px;
          height: 100px;
          background-color: pink;
      }
  </style>
   <div class="all">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
  </div>

** 七、行对齐方式(align-content)**(对单行弹性盒子不生效)

flex-start（默认值）：弹性盒子从起点依次排列
flex-end：弹性盒子从终点依次排列
center： 弹性盒子沿主轴居中排列
space-between：弹性盒子沿主轴均匀排列，空白间距均分布在弹性盒子之间。
space-around：弹性盒子沿主轴均匀排列，空白间距均分布在弹性盒子两侧。
space-evenly：弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等。