css flex布局

最新推荐文章于 2024-09-05 10:31:00 发布

专业前端小白

最新推荐文章于 2024-09-05 10:31:00 发布

阅读量269

点赞数

分类专栏：布局 flex 文章标签： flex布局

本文链接：https://blog.csdn.net/qq_41756580/article/details/102809891

版权

布局同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

flex

1 篇文章 0 订阅

订阅专栏

之前对flex布局一直不怎么足够了解，概念有点模糊，现在花点时间详细的练习一下，下面是练习的代码：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>flex布局</title>
    <style type="text/css">
      *{
        box-sizing: border-box;
        padding: 0;
        margin: 0;
      }
      body{
        display: flex;
        flex-direction: column;/*让元素沿垂直主轴从上到下垂直排列*/
        background-color: #eee;
      }
      header{
        width: 100%;
        height: 60px;
        line-height: 60px;
        margin-bottom: 10px;
        background-color: #fff;
      }
      .container{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row; /*(默认)沿水平主轴让元素从左向右排列*/
        flex-wrap: nowrap; /*(默认)元素不换行,比如：两个子元素div宽度100%，设置此属性，2个div宽度就自动变成各50%，不管子元素的宽度为多少，都会被父元素的宽度按照比例压缩成一行*/
        justify-content: flex-start; /*（默认值）：左对齐,类似于文字的对齐，向轴的起点方向对齐*/
      }
      .container aside{
        width: 300px;
        height: 100%;
        background-color: #fff;
        margin-right: 10px;
      }
      .container section{
        width: 100%;
        height: 100%;
        background-color: #fff;
        overflow: auto;
      }
      .container-line{
        margin-bottom: 20px;
      }
      .block-text{
        width: 100%;
        line-height: 30px;
        padding: 0px 10px;
      }
      .justify-content-center{
        display: flex;
        justify-content: center; /*居中: 子元素将会位于父元素的中央*/
        border: 5px solid #333;
      }
      .justify-content-space-between{
        display: flex;
        justify-content: space-between; /*两端对齐，项目之间的间隔都相等。*/
        border: 5px solid #333;
      }
      .justify-content-space-around{
        display: flex;
        justify-content: space-around; /*每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。*/
        border: 5px solid #333;
      }
      .align-items-center{
        height: 100px;
        display: flex;
        align-items: center; /*垂直排列，侧轴的中点对齐，默认情况下，即垂直居中，很实用的属性。*/
        border: 5px solid #333;
      }
      .block{
        width: 50px;
        height: 50px;
        background-color: #ddd;
        border: 3px solid #333;
      }
    </style>
  </head>
  <body>
    <header></header>
    <div id="container" class="container">
      <aside></aside>
      <section>
        <div class="container-line">
          <div class="block-text">flex布局的 justify-content:center; 属性效果</div>
          <div class="justify-content-center">
            <div class="block"></div>
            <div class="block"></div>
            <div class="block"></div>
            <div class="block"></div>
          </div>
        </div>
        <div class="container-line">
          <div class="block-text">flex布局的 justify-content:space-between; 属性效果</div>
          <div class="justify-content-space-between">
            <div class="block"></div>
            <div class="block"></div>
            <div class="block"></div>
            <div class="block"></div>
          </div>
        </div>
        <div class="container-line">
          <div class="block-text">flex布局的 justify-content:space-around; 属性效果</div>
          <div class="justify-content-space-around">
            <div class="block"></div>
            <div class="block"></div>
            <div class="block"></div>
            <div class="block"></div>
          </div>
        </div>
        <div class="container-line">
          <div class="block-text">flex布局的 align-items:center; 属性效果</div>
          <div class="align-items-center">
            <div class="block"></div>
            <div class="block"></div>
            <div class="block"></div>
            <div class="block"></div>
          </div>
        </div>
      </section>
    </div>

    <script type="text/javascript">
      var container = document.getElementById("container");
      var height = document.documentElement.clientHeight || document.body.clientHeight;
      console.log(height);
      height = height - 70;
      container.style.height = height + "px";
    </script>
  </body>
</html>

未完待续。。。