Flex布局(一)flex-direction

2018-06-24 02:26:10来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

采用Flex布局的元素,被称为Flex容器(flex container),简称"容器"。其所有子元素自动成为容器成员,成为Flex项目(Flex item),简称"项目"

Flex-direction调整主轴方向(默认为水平方向)包括row、column、row-reverse、column-reverse

代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.    <meta charset="UTF-8">
  5.    <title>CSS3伸缩布局</title>
  6.    <style>
  7.       body {
  8.          margin: 0;
  9.          padding: 0;
  10.          font-family: '微软雅黑';
  11.          background-color: #F7F7F7;
  12.       }
  13.  
  14.       ul {
  15.          margin: 0;
  16.          padding: 0;
  17.          list-style: none;
  18.       }
  19.  
  20.       .wrapper {
  21.          width: 1024px;
  22.          margin: 0 auto;
  23.       }
  24.  
  25.       .wrapper > section {
  26.          min-height: 300px;
  27.          margin-bottom: 30px;
  28.          box-shadow: 1px 1px 4px #DDD;
  29.          background-color: #FFF;
  30.       }
  31.  
  32.       .wrapper > header {
  33.          text-align: center;
  34.          line-height: 1;
  35.          padding: 20px;
  36.          margin-bottom: 10px;
  37.          font-size: 30px;
  38.       }
  39.  
  40.       .wrapper section > header {
  41.          line-height: 1;
  42.          padding: 10px;
  43.          font-size: 22px;
  44.          color: #333;
  45.          background-color: #EEE;
  46.       }
  47.  
  48.       .wrapper .wrap-box {
  49.          padding: 20px;
  50.       }
  51.  
  52.       .wrapper .brief {
  53.          min-height: auto;
  54.       }
  55.  
  56.       .wrapper .flex-img {
  57.          width: 100%;
  58.       }
  59.  
  60.       /*全局设置*/
  61.       section ul {
  62.          display: flex;
  63.       }
  64.  
  65.       section li {
  66.          width: 200px;
  67.          height: 200px;
  68.          text-align: center;
  69.          line-height: 200px;
  70.          margin: 10px;
  71.          background-color: pink;
  72.       }
  73.  
  74.       /*垂直方向*/
  75.       section:nth-child(2) ul {
  76.          display: flex;
  77.       }
  78.  
  79.       .column ul {
  80.          flex-direction: column;
  81.       }
  82.  
  83.       .row-reverse ul {
  84.          flex-direction: row-reverse;
  85.       }
  86.  
  87.       .column-reverse ul {
  88.          flex-direction: column-reverse;
  89.       }
  90.  
  91.       /*1、指定一个盒子为伸缩盒子 display: flex*/
  92.  
  93.       /*2、设置属性来调整此盒的子元素的布局方式 例如 flex-direction*/
  94.  
  95.       /*3、明确方向*/
  96.  
  97.       /*4、它可互换主侧轴,也可改变方向*/
  98.  
  99.    </style>
  100. </head>
  101. <body>
  102.    <div class="wrapper">
  103.       <header>CSS3-伸缩布局详解</header>
  104.       <!-- 简介 -->
  105.       <section class="brief">
  106.          <header>flex-direction</header>
  107.          <div class="wrap-box">
  108.             <p>调整主轴方向默认为水平方向包括rowcolumnrow-reversecolumn-reverse</p>
  109.          </div>
  110.       </section>
  111.       <!-- 分隔线 -->
  112.       <section>
  113.          <header>flex-direction</header>
  114.          <div class="wrap-box">
  115.             <p>调整主轴方向默认为水平方向)</p>
  116.             <ul>
  117.                <li>1</li>
  118.                <li>2</li>
  119.                <li>3</li>
  120.             </ul>
  121.          </div>
  122.       </section>
  123.       <section class="column">
  124.          <header>column</header>
  125.          <div class="wrap-box">
  126.             <p>调整主轴方向默认为水平方向)</p>
  127.             <ul>
  128.                <li>1</li>
  129.                <li>2</li>
  130.                <li>3</li>
  131.             </ul>
  132.          </div>
  133.       </section>
  134.       <section class="row-reverse">
  135.          <header>row-reverse</header>
  136.          <div class="wrap-box">
  137.             <p>调整主轴方向默认为水平方向)</p>
  138.             <ul>
  139.                <li>1</li>
  140.                <li>2</li>
  141.                <li>3</li>
  142.             </ul>
  143.          </div>
  144.       </section>
  145.       <section class="column-reverse">
  146.          <header>column-reverse</header>
  147.          <div class="wrap-box">
  148.             <p>调整主轴方向默认为水平方向)</p>
  149.             <ul>
  150.                <li>1</li>
  151.                <li>2</li>
  152.                <li>3</li>
  153.             </ul>
  154.          </div>
  155.       </section>
  156.    </div>
  157. </body>
  158. </html>

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:Selenium基本用法以及元素定位

下一篇:前端基础-CSS如何布局以及文档流