CSS3【display: flex;】自适应布局案例

简介: CSS3【display: flex;】自适应布局案例
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    h3 {
      margin: 20px 0 10px 100px;
      font-weight: normal;
    }
    /* 导航栏自适应布局 */
    ul {
      width: 600px;
      margin-left: 100px;
      display: flex;
      border: 1px solid #000;
    }
    ul li {
      flex: 1;
      text-align: center;
      line-height: 60px;
      background-color: pink;
      margin: 0 5px;
    }
    /* 网页自适应布局 */
    .layout {
      width: 600px;
      height: 400px;
      border: 1px solid #000;
      margin-left: 100px;
      /* 伸缩布局 */
      display: flex;
      /* 主轴方向 */
      flex-direction: column;
    }
    .header {
      background-color: pink;
      flex: 1;
    }
    .section {
      background-color: red;
      flex: 5;
      display: flex;
    }
    .left {
      flex: 1;
      background-color: orange;
    }
    .right {
      flex: 3;
      background-color: #f40;
    }
    .footer {
      background-color: #222;
      flex: 1;
    }
  </style>
</head>
<body>
  <h3>导航栏自适应布局</h3>
  <ul>
    <li>消息</li>
    <li>消息</li>
    <li>消息</li>
    <li>消息</li>
    <li>消息</li>
  </ul>
  <h3>网页自适应布局</h3>
  <div class="layout">
    <div class="header"></div>
    <div class="section">
      <div class="left"></div>
      <div class="right"></div>
    </div>
    <div class="footer"></div>
  </div>
</body>
</html>
  • demo 效果:

相关文章
|
20天前
|
前端开发 UED 容器
在 CSS 中使用 Flex 布局实现页面自适应时需要注意什么?
【10月更文挑战第22天】在使用 Flex 布局实现页面自适应时,需要对其基本原理和特性有深入的理解,同时结合具体的布局需求和场景,进行细致的调整和优化。通过合理的设置和注意事项的把握,才能实现理想的自适应效果,提升用户体验。还可以根据实际情况进行更深入的探索和实践,以不断提升 Flex 布局的应用能力。
|
20天前
|
前端开发
css页面顶部底部固定,中间自适应几种方法
【10月更文挑战第22天】css页面顶部底部固定,中间自适应几种方法
|
13天前
|
前端开发 容器
实现CSS品字布局
【10月更文挑战第27天】
|
1月前
|
前端开发 开发者 容器
CSS3:flex&box-sizing
本文介绍了CSS中的Flex布局及其相关属性,如`flex-direction`、`flex-wrap`、`justify-content`等,并通过代码示例展示了如何使用这些属性来控制容器内的项目排列方式。同时,还讲解了`align-items`属性用于定义子元素在交叉轴上的对齐方式,以及`box-sizing`属性的不同取值对元素尺寸计算的影响。
|
前端开发 容器
CSS display属性的作用
CSS display属性
152 0
CSS display属性的作用
|
5月前
|
前端开发
CSS中的display属性:布局控制的关键
CSS中的display属性:布局控制的关键
161 42
|
前端开发
HTML: css中的display属性
HTML: css中的display属性
73 0
|
前端开发
web前端学习(二十二)——CSS3元素的显示(display)、可见性(visibility)与溢出(overflow)属性的相关设置
web前端学习(二十二)——CSS3元素的显示(display)、可见性(visibility)与溢出(overflow)属性的相关设置
web前端学习(二十二)——CSS3元素的显示(display)、可见性(visibility)与溢出(overflow)属性的相关设置
|
JavaScript 前端开发
使用 jQuery 选择器获取页面元素,然后利用 jQuery 对象的 css() 方法设置其 display 样式属性,从而实现显示和隐藏效果。
使用 jQuery 选择器获取页面元素,然后利用 jQuery 对象的 css() 方法设置其 display 样式属性,从而实现显示和隐藏效果。
314 0
使用 jQuery 选择器获取页面元素,然后利用 jQuery 对象的 css() 方法设置其 display 样式属性,从而实现显示和隐藏效果。