flex布局：flex容器中的四个属性的功能，参数，以及作用

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>flex容器中的四个属性的功能，参数，以及作用</title>
    <style type="text/css">
      * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
      }
      /* 设置元素html字体为10px */
      :root {
        font-size: 10px;
      }
      /* body字体为16px */
      body {
        font-size: 1.6rem;
      }
      /* 定义一个flex容器
      #box {
        border: 1px solid;
        width: 30em;
        height: 30em;
         转变为flex容器
        display: flex;
        设置为水平方向排列，不换行元素
        flex-flow: row nowrap;
      }*/
      /* #box {
         border: 1px solid;
        width: 30em;
        height: 30em;
        display: flex;
         设置为水平方向排列，会进行换行
        flex-flow: row wrap;
      } */
      /* #box {
        width: 30em;
        height: 30em;
        display: flex;
        设置为垂直方向排列，不会进行换行
        flex-flow: column nowrap;
      } */
      /* #box {
        width: 30em;
        height: 30em;
        display: flex;
        设置为垂直方向排列，会进行换行
        flex-flow: column wrap;
      } */
      /* #box {
        width: 30em;
        height: 30em;
        display: flex;
        设置项目在主轴上的对齐方式，默认起始线。
        justify-content: flex-start;
      } */
      /* #box {
        width: 30em;
        height: 30em;
        display: flex;
        设置项目在主轴上的对齐方式，终止线。
        justify-content: flex-end;
      } */
      /* #box {
        width: 30em;
        height: 30em;
        display: flex;
        设置项目在主轴上的对齐方式，居中。
        justify-content: center;
      } */
      /* #box {
        width: 30em;
        height: 30em;
        display: flex;
        设置项目在主轴上的对齐方式，两端对齐。
        justify-content: space-between;
      } */
      /* #box {
        width: 30em;
        height: 30em;
        display: flex;
        设置项目在主轴上的对齐方式，分散对齐。
        justify-content: space-around;
      } */
      /* #box {
        width: 30em;
        height: 30em;
        display: flex;
        设置项目在主轴上的对齐方式，平均对齐。
        justify-content: space-evenly;
      } */
      /*
      #box {
        width: 30em;
        height: 30em;
        display: flex;
        设置项目在交叉轴的对齐方式，默认拉伸。
        align-items: stretch;
      } */
      /* #box {
        width: 30em;
        height: 30em;
        display: flex;
        设置项目在交叉轴的对齐方式，起始线。
        align-items: flex-start;
      } */
      /* #box {
        width: 30em;
        height: 30em;
        display: flex;
        设置项目在交叉轴的对齐方式，终止线。
        align-items: flex-end;
      } */
      /* #box {
        width: 30em;
        height: 30em;
        display: flex;
        设置项目在交叉轴的对齐方式，居中。
        align-items: center;
      } */
      #box {
        width: 30em;
        height: 30em;
        display: flex;
        /* 设置项目在多行容器交叉轴上的对齐方式，起始线。 */
        flex-flow: row wrap;
        align-content: flex-start;
      }
      #box > .boxder {
        border: 1px solid;
        background: lightgreen;
        width: 5em;
        height: 5em;
      }
    </style>
  </head>
  <body>
    <div id="box">
      <div class="boxder">项目1</div>
      <div class="boxder">项目2</div>
      <div class="boxder">项目3</div>
      <div class="boxder">项目4</div>
      <div class="boxder">项目5</div>
      <div class="boxder">项目6</div>
      <div class="boxder">项目7</div>
      <div class="boxder">项目8</div>
      <div class="boxder">项目9</div>
      <div class="boxder">项目10</div>
    </div>
  </body>
</html>
flex简单实现让项目居中
怎么样很简单吧？几行代码搞定。不像之前的定位要设置很多参数，使用flex布局会更加的简洁方便！
代码块
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>flex简单实现让项目居中</title>
    <style type="text/css">
      * {
        box-sizing: border-box;
      }
      #box1 {
        border: 1px solid;
        width: 25em;
        height: 25em;
        background: lightpink;
        /* 设为flex容器 */
        display: flex;
        /* 让这个项目在水平线上居中 */
        justify-content: center;
        /* 让这个项目在交叉轴上居中 */
        align-items: center;
      }
      #box2 {
        border: 1px solid;
        width: 15em;
        height: 15em;
        background: limegreen;
      }
    </style>
  </head>
  <body>
    <div id="box1">
      <div id="box2"></div>
    </div>
  </body>
</html>
更多相关文章

随机推荐
