CSS弹性盒子布局

CSS弹性盒子布局

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹性盒子</title>
    <style>
        .father{
            display: flex;
            width: 400px;
            background-color: lightskyblue;
        }
        .item{
            width: 100px;
        }
    </style>
</head>
<body>
    <div class="father" >
        <div class="item" style="background:lightpink;">1</div>
        <div class="item" style="background:lightcoral;">2</div>
        <div class="item" style="background:lightgreen;">3</div>
    </div> 
</body>
</html>

方法：

给父级元素设置样式，例如项目中经常用到的：

.father{
  display: flex;
  /*
  just-cotent: flex-start; //默认值
  flex-wrap: nowrap;//默认值
  */
  justify-content: space-around;//中间和两边间距相同
  flex-wrap: wrap;//必要位置换行
}

改变样式：

可以利用just-content横向布局，flex-direction纵向排列。
align-items、align-content可以改变该弹性盒子在容器的位置。
flex-wrop决定必要是是否换行，和换行方向。

just-content：

  1. flex-start //横向连续排列
  2. flex-end //从尾部开始横向连续排列
  3. center //中间横向连续排列
  4. space-between //中间间隔相同
  5. space-around //中间 两边间隔都相同
  6. initial //继承父级

flex-direction:

  1. row //横向排列
  2. row-reverse //相反顺序横向排列
  3. column //纵向排列
  4. column-reverse //相反顺序纵向排列

align-items:

  1. strech //拉伸适应容器
  2. center //容器中心
  3. flex-start //容器开头
  4. flex-end //容器末尾
  5. baseline //容器基线

flex-wrop:

  1. nowrap //默认值
  2. wrap //必要位置换行
  3. wrap-reverse //相反顺序换行

align-content:center对单行无效，而align-items:center对单行还是多行都有效果，align-items更好。

补充：
flex-flow:是flex-direction和flex-wrop的简写。默认值为row nowrap。

版权声明：本文为m0_37647258原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。