做有态度的前端团队

网易FEG前端团队

flexbox布局实践1

1、子元素等分

这种布局常用于底部的导航或者tab等分

ul{
  display:flex;
}
li{
  flex:1;
}

完整代码:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>test1</title>
  <style>
    body{
      margin:0
    }
    ul{
      display:flex;
      padding:0;
    }
    li{
      flex:1;
      background:red;
      margin:0;
      list-style:none;
      height:20px;
    }
  </style>
</head>
<body>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>
</body>
</html>

1.png

2、左右固定宽度,中间自适应
这种布局常用于左右各有图标的列表

ul{
  display:flex;
}
li:first-child,
li:last-child{
  width:50px;
}
li:nth-child(2){
  flex:1;
}

完整代码:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>test2</title>
  <style>
    body{
      margin:0
    }
    ul{
      display:flex;
      padding:0;
    }
    li{
      background:red;
      margin:0;
      list-style:none;
      height:20px;
    }
    li:first-child,
    li:last-child{
      width:50px;
    }
    li:nth-child(2){
      flex:1;
    }
  </style>
</head>
<body>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>

</ul>
</body>
</html>

2.png

3、顶部贴顶,底部贴底

html,body,ul{
  height:100%;
}
ul{
  display:flex;
  flex-direction:column;
}
li:first-child,
li:last-child{
  height:50px;
}
li:nth-child(2){
  flex:1;
}

完整代码:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>test3</title>
  <style>
    html,body,ul{
      height:100%;
    }
    body{
      margin:0
    }
    ul{
      display:flex;
      flex-direction:column;
      padding:0;
      margin:0;
    }
    li{
      background:red;
      margin:0;
      list-style:none;
      height:20px;
    }
    li:first-child,
    li:last-child{
      height:50px;
    }
    li:nth-child(2){
      flex:1;
    }
  </style>
</head>
<body>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>

</ul>
</body>
</html>

3.png

手机阅读请扫描下方二维码:

已有 1 条评论

  1. 毛毛

    尊敬的前辈您好,晚辈有事相求。可否微信

添加新评论

ali-40.gifali-41.gifali-42.gifali-43.gifali-44.gifali-45.gifali-46.gifali-47.gifali-48.gifali-49.gifali-50.gifali-51.gifali-52.gifali-53.gifali-54.gifali-55.gifali-56.gifali-57.gifali-58.gifali-59.gifali-60.gifali-61.gif